주요 hook

React Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.

클래스 컴포넌트에서만 가능했던 여러 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.

아래 표는 React의 주요 Hook들과 그 사용법을 정리한 것입니다. 각 Hook은 특정한 용도로 설계되었으며, 컴포넌트의 효율적인 관리와 최적화를 위해 적절히 사용되어야 합니다.

Hook 이름	설명	사용 예제
useState	컴포넌트의 상태를 선언하고 관리하는 데 사용.	const [count, setCount] = useState(0);
useEffect	컴포넌트의 생명주기와 유사한 효과를 처리하는 데 사용. (렌더링 후, 의존성 변화 시 실행)	useEffect(() => { console.log(count); }, [count]);
useContext	Context API를 사용하여 전역 상태를 관리.	const value = useContext(MyContext);
useReducer	복잡한 상태 로직을 관리하기 위한 Hook.	const [state, dispatch] = useReducer(reducer, initialState);
useRef	DOM 요소나 값을 참조하는 데 사용. 값은 렌더링 간에 유지됨.	const inputRef = useRef(null);
useMemo	값의 재계산을 방지하고 캐싱하기 위해 사용.	const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback	함수의 재생성을 방지하기 위해 사용.	const memoizedCallback = useCallback(() => { doSomething(); }, [dependency]);
useLayoutEffect	DOM 변화를 처리하고 싶은 경우 useEffect보다 빨리 실행됨.	useLayoutEffect(() => { console.log('DOM 변경됨'); });
useImperativeHandle	부모 컴포넌트가 자식 컴포넌트의 ref를 커스터마이징할 수 있게 해줌.	useImperativeHandle(ref, () => ({ customMethod: () => { ... } }));
useDebugValue	React 개발자 도구에 Hook의 디버깅 정보를 표시하는 데 사용.	useDebugValue(someValue, formatValue);
useTransition	UI 업데이트를 점진적으로 처리하고 우선순위를 낮추는 데 사용 (React 18+).	const [isPending, startTransition] = useTransition();
useDeferredValue	값 업데이트를 지연 처리하여 성능을 개선 (React 18+).	const deferredValue = useDeferredValue(value);
useId	고유 ID를 생성하여 접근성 속성에 활용 (React 18+).	const id = useId();
useSyncExternalStore	외부 스토어와 동기화된 상태를 읽고 업데이트를 처리 (React 18+).	const state = useSyncExternalStore(subscribe, getSnapshot);