React에서 많이 사용하는 훅에 대해서 테이블로 정리 설명 한다.
| 훅 이름 | 기능 설명 | 주 사용 목적 | 간단한 예시 |
|---|---|---|---|
useState | 상태 값을 만들고 변경할 수 있음 | 사용자 입력, UI 상태 저장 | const [x, setX] = useState(0) |
useReducer | 복잡한 상태 로직을 reducer 함수로 처리함 | 상태가 여러 단계로 바뀌는 경우 | const [state, dispatch] = useReducer(reducer, init) |
useContext | Context 값을 읽어옴 | 글로벌 상태 전달 (예: 테마, 언어) | const theme = useContext(ThemeContext) |
useRef | DOM 요소나 변수를 저장하지만 화면 다시 그리지는 않음 | DOM 조작, 타이머 ID 저장 등 | const ref = useRef(null) |
useImperativeHandle | 부모 컴포넌트에 노출할 ref 기능을 제어함 | 라이브러리에서 ref 제어 시 | useImperativeHandle(ref, () => ({ focus })) |
useEffect | 컴포넌트 렌더링 후 외부 시스템과 동기화 수행 | API 호출, 이벤트 등록/해제 등 | useEffect(() => { ... }, [deps]) |
useLayoutEffect | DOM 그리기 전에 실행됨 | 레이아웃 측정, 위치 계산 | useLayoutEffect(() => { ... }, []) |
useInsertionEffect | DOM 조작 전에 실행됨 | 동적 스타일 삽입 (CSS-in-JS 라이브러리 등) | useInsertionEffect(() => { ... }, []) |
useMemo | 계산 결과를 메모이제이션 (기억) 함 | 성능 최적화 (비싼 계산 최소화) | useMemo(() => calc(), [deps]) |
useCallback | 함수 정의를 메모이제이션 | 자식에게 함수를 props로 넘길 때 | useCallback(() => fn(), [deps]) |
useTransition | 비동기 상태 업데이트를 사용자 입력보다 느리게 처리함 | UI 응답성 향상 | const [start, isPending] = useTransition() |
useDeferredValue | 특정 값을 느리게 갱신 | UI 일부만 느리게 갱신 | const deferred = useDeferredValue(value) |
useDebugValue | DevTools에서 훅 상태를 표시함 | 커스텀 훅 디버깅용 | useDebugValue(state) |
useId | 고유한 ID를 생성 (서버-클라이언트 간 일치 가능) | 접근성 속성(id-for 등)에 활용 | const id = useId() |
useSyncExternalStore | 외부 저장소에 구독하고 일관성 있는 값 사용 | 상태 관리 라이브러리 연결 | useSyncExternalStore(subscribe, getSnapshot) |
useActionState | Form action의 상태를 저장하고 관리함 | 서버 액션과 상태 결합 | const [state, action] = useActionState(actionFn, init) |