Hooks의 종류
- useState
- useEffect
- useCallback
- useMemo, useContext, useRef, useLayoutEffect...
useState
컴포넌트의 state를 생성하는 훅
배열을 리턴하며, 첫 번째 요소는 state 값, 두 번째 요소는 해당 state를 set해주는 setter 함수
인자로 넘겨주는 값은 state의 초기값
useEffect
컴포넌트가 렌더링 될 때 현재 상태 변화에 따라 조건적으로 특정 작업을 실행하는 훅
클린업 함수: 컴포넌트가 언마운트 될 때 및 의존성 배열에 포함된 값이 변화할 때 실행되는 함수,
컴포넌트가 사용했던 자원을 제거 ex) 타이머, 인터벌, 이벤트, 객체 등
useCallback
성능 최적화를 위한 훅
이전 렌더링에 생성한 함수를 기억해서 기존 함수를 재활용 > 메모이제이션
useCallback 예제
const increaseValue = () => {
setValue(value + 1);
};
const resetValue = useCallback(() => {
setValue(0);
}, []);
1. increaseValue는 useCallback을 사용 시 value 값이 0인 상태로 고정되기에 사용하지 않음
2. resetValue는 현재 value의 값과 상관없이 0으로 만들기 때문에 렌더링마다 함수를 생성할 필요가 없어 useCallback을 사용함
주의사항
1. Hooks는 조건적으로 사용하지 말 것, Hooks는 배열로 관리되기 때문에 건너뛰면 서로 충돌
2. 함수형 컴포넌트나 커스텀 훅의 최상위에서만 호출해야 함
