hee-ya07 님의 블로그

4. useEffect: side-Effect를 처리하기 위한 Hook: 컴포넌트가 로드될 때, 외부에서 발생하는 작업을 처리하는 함수const Component=()=>{ ... useEffect(()=>{ // 할 일 }, [props, state] //const App = () => { const [count, setCount] = useState(0); // useEffect로 부수효과 처리 useEffect(() => { // 이 함수는 렌더링 후에 실행 console.log('컴포넌트가 렌더링되었습니다!'); }, []); // 빈 배열을 전달하면 이 effect는 컴포넌트가 처음 렌더링될 때만 실행 return ( Count: {count..

5. useContext: React의 Context API와 함께 사용: 여러 컴포넌트에서 전역 상태를 공유 -> props drlling(props의 수직적인 전달) 회피 가능5.1 Context: props drlling을 극복하기 위한 개념: 명시적인 props 전달 없이 하위 컴포넌트에서 사용 가능5.2 Context API의 구성 및 사용 방법- Context :: 전역 상태가 저장- Provider :: 전역 상태를 제공, 어디까지 수평적 전달을 할지 제한, 사용할 범위를 감싸고 있어야 함- Consumer :: 전역 상태를 사용-접근 3개의 절차Create :: createContext - DefaultValue 설정 (Provider 외부에서도 사용 가능 값)Provider :: Crea..

3. useRef: useState, useReducer와 동일하게 컴포넌트 내부의 리렌더링에도 상태 값 저장 가능: useRef를 통한 지정은 외부 변수(= 비제어 컴포넌트로, 변경 시에도 리렌더링 X)     -> ref객체는 js엔진 내의 Heap 내를 포인트     -> Heap 내의 객체를 바꾸는 것이기 때문에 주소 자체는 미변동const refPoint = useRef(); // 초기 값 미지정시, undefined- DOM지정 시, 초기 값은 null  || 다른 값의 경우 알아서.... // refPoint.current객체 안의 value로 해당 input안의 값에 접근 가능- 값을 리렌더링 없이 따로 저장하거나, DOM에 대한 직접 조작 시, 해당을 사용 - Ex더보기import '@/..

2. useReducer: 상태 관리 훅: useState보다 복잡한 상태 로직을 처리할 경우 유용: 주로 여러 하위 값들이 의존하는 상태를 관리 or 상태 업데이트 로직이 복잡할 경우 사용const [, ] = useReducer(, , );const [state, dispatcher ] = useReducer(reducer, initialState, init);구성- 반환 값은 useState와 동일하게 상태 값과 업데이트 함수-  state :: 현재 useReducer의 값- dispatcher :: state를 업데이트하는 함수, setState와 달리 인수로 정해진 action 값을 넘김(동작을 미리 정의 및 제한)- reducer :: useReducer의 기본 ..

1. useState: 함수형 컴포넌트 내부에서 상태를 정의 및 관리: useState로 지정은 내부 변수 (= 제어 컴포넌트로, 변경 시 리렌더링O)const [state ,setState] = useState(); // 초기값 미정의 시 undefined: 현 상태, 세터가 제공됨유의점- setState를 통해 값을 업데이트할 경우 비동기적 업데이트임 확인해야함- 리렌더링 시에 set~를 한번에 진행const App = () => { const [state, setState] = useState('hello') return ( {state} { setState('hi') console.log(state) // hello }} ..

리액트 훅 ... 후욱후욱..0. React  Hook이란: 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수: 즉, 상태 관리와 부수효과(side-effect)를 간단하게 처리하기 위한 함수 종류(기본적인 것만 명시)1) useState : 컴포넌트의 상태를 관리2) useEffect : 부수효과를 처리3) useContext : 컨텍스트(Context)를 사용하여 전역 상태 관리4) useReducer : 복잡한 상태 로직을 다루는 데 유용한 Hook5) useRef : 렌더링 사이에 변수를 저장할 수 있는 Hook6) useMemo, useCallback : 성능 최적화 Hook1. useState2025.01.15 - [정리용/react] - [07-React] 6-1. Rea..

1. Vite: Vue, React, Svelte 등을 지원하는 빌드 도구1.1 배경- 다른 번들링 도구들인 webpack, Rollup, Parcel의 경우,1) JS의 크기가 커지면서 병목 현상의 발생 가능성도 증가2) 느린 피드백(느린 반영)번들러 기반 설정의 흐름파일 편집 시, 전체 번들을 빌드  보여줌 -> 비효율적(파일 크기에 따른 속도의 선형적 저하를 초래) -> 이를 해결하고자 Vite가 나옴esbuild를 사용 → 종속성을 미리 번들로 묶음네이티브 ESM을 통해 소스코드 제공⇒ 네이티브 ESM에서 HMR을 수행 시, 편집된 요소의 주변만 교체 및 무효1.2 설치- 프로젝트 내 수동 설치npm install -D vite2. 파일 구성파일 설명 .eslintrc.cjs : 컴파일 설정 = ..