[07-React] 6. React Hook
리액트 훅 ... 후욱후욱..
0. React Hook이란
: 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수
: 즉, 상태 관리와 부수효과(side-effect)를 간단하게 처리하기 위한 함수
- 종류(기본적인 것만 명시)
1) useState : 컴포넌트의 상태를 관리
2) useEffect : 부수효과를 처리
3) useContext : 컨텍스트(Context)를 사용하여 전역 상태 관리
4) useReducer : 복잡한 상태 로직을 다루는 데 유용한 Hook
5) useRef : 렌더링 사이에 변수를 저장할 수 있는 Hook
6) useMemo, useCallback : 성능 최적화 Hook
1. useState
2025.01.15 - [정리용/react] - [07-React] 6-1. React Hook :: useState
[07-React] 6-1. React Hook :: useState
1. useState: 함수형 컴포넌트 내부에서 상태를 정의 및 관리: useState로 지정은 내부 변수 (= 제어 컴포넌트로, 변경 시 리렌더링O)const [state ,setState] = useState(); // 초기값 미정의 시 undefined: 현 상태,
hee-ya07.tistory.com
2. useReducer
2025.01.15 - [정리용/react] - [07-React] 6-2. React Hook :: useReducer
[07-React] 6-2. React Hook :: useReducer
2. useReducer: 상태 관리 훅: useState보다 복잡한 상태 로직을 처리할 경우 유용: 주로 여러 하위 값들이 의존하는 상태를 관리 or 상태 업데이트 로직이 복잡할 경우 사용const [, ] = useReducer(, , );const [s
hee-ya07.tistory.com
3. useRef
2025.01.15 - [정리용/react] - [07-React] 6-3. React Hook :: useRef
[07-React] 6-3. React Hook :: useRef
3. useRef: useState, useReducer와 동일하게 컴포넌트 내부의 리렌더링에도 상태 값 저장 가능: useRef를 통한 지정은 외부 변수(= 비제어 컴포넌트로, 변경 시에도 리렌더링 X) -> ref객체는 js엔진 내
hee-ya07.tistory.com
4. useEffect
2025.01.15 - [정리용/react] - [07-React] 6-4. React Hook :: useEffect
[07-React] 6-4. React Hook :: useEffect
4. useEffect: side-Effect를 처리하기 위한 Hook: 컴포넌트가 로드될 때, 외부에서 발생하는 작업을 처리하는 함수const Component=()=>{ ... useEffect(()=>{ // 할 일 }, [props, state] //const App = () => { const [count, setCount
hee-ya07.tistory.com
5. useContext
2025.01.15 - [정리용/react] - [07-React] 6-5. React Hook :: useContext
[07-React] 6-5. React Hook :: useContext
5. useContext: React의 Context API와 함께 사용: 여러 컴포넌트에서 전역 상태를 공유 -> props drlling(props의 수직적인 전달) 회피 가능5.1 Context: props drlling을 극복하기 위한 개념: 명시적인 props 전달 없이
hee-ya07.tistory.com
6. useLayoutEffect
2025.01.17 - [정리용/react] - [07-React] 6-6. React Hook :: useLayoutEffect
[07-React] 6-6. React Hook :: useLayoutEffect
6. useLayoutEffect: WB가 re-paint 전 실행되는 useEffect의 일종useLayoutEffect(setup, dependencies?)const Example = () => { useLayoutEffect(() => { console.log('렌더링 후, 화면에 그리기 전에 실행됩니다.'); }, []); // 의존성 배
hee-ya07.tistory.com
7. useMemo, React.memo
2025.01.17 - [정리용/react] - [07-React] 6-7. React Hook :: useMemo, React.memo
[07-React] 6-7. React Hook :: useMemo, React.memo
7. useMemo: 비싼 계산에 대한 결과를 저장(메모리제이션)하고, 의존성 배열을 트리거로 하여 변화가 없으면 저장된 값 반환: 일반적으로 "값" 에 대한 저장const cachedValue = useMemo(calculateValue, dependencie
hee-ya07.tistory.com
8. useCallback
2025.01.17 - [정리용/react] - [07-React] 6-8. React Hook :: useCallback
[07-React] 6-8. React Hook :: useCallback
8. useCallback: 인수로 넘겨 받은 "callBack" 을 캐싱 => 함수에 대한 저장(메모리제이션): 동일한 함수가 계속 재사용되므로 불필요한 리렌더링을 방지const cachedFn = useCallback(fn, dependencies)첫번째 인
hee-ya07.tistory.com