React Hooks 종류별 정리

Hooks 한 줄 정의

React Hooks는 함수 컴포넌트에서 state, effect(부작용), context 등 React 기능을 "클래스 없이" 쓰게 해주는 API입니다.¹ Hooks는 "종류(카테고리)"로 묶어 이해하면, 어떤 문제를 어떤 Hook으로 푸는지 빠르게 감이 잡힙니다.²

State Hooks

State Hooks는 컴포넌트가 사용자 입력 같은 정보를 "기억"하도록 만드는 도구입니다.² 가장 기본은 useState로, 현재 값과 값을 바꾸는 setter를 한 쌍으로 얻습니다.¹ 이전 값에 기반해 갱신해야 하면 setter에 함수를 넘기는 "함수형 업데이트"를 쓰는 게 안전합니다.¹ 초기값 계산이 비싸면 초기 렌더에서만 실행되도록 "지연 초기화" 형태(초기값 대신 함수 전달)로 최적화할 수 있습니다.¹

복잡한 상태(여러 필드가 얽히거나, "액션" 중심으로 상태가 변하는 경우)에는 useReducer가 더 구조적입니다. 업데이트 로직을 reducer 함수로 분리해 두고 dispatch(action)으로 상태 전이를 일으키는 패턴이라, 상태 변화 규칙을 한 곳에 모으기 좋습니다.²

Context Hooks

Context Hooks는 props로 길게 내려 보내지 않고도, 멀리 있는 상위 컴포넌트의 값을 하위에서 읽게 해줍니다.² useContext는 특정 context 객체를 받아 현재 값을 읽고, provider 값이 바뀌면 자동으로 다시 렌더링되도록 "구독"까지 포함합니다.¹²

Ref Hooks

Ref Hooks는 렌더링에 쓰지 않는 값을 컴포넌트 수명 동안 유지하거나, DOM 노드를 직접 다뤄야 할 때 사용하는 "탈출구" 성격입니다.² useRef는 .current에 어떤 값이든 담아둘 수 있고, 이 값을 바꿔도 리렌더링을 일으키지 않습니다.² useImperativeHandle은 부모가 ref로 접근할 때 노출되는 API를 커스터마이즈하는 용도인데, 앱 코드에서 자주 쓰기보다는 라이브러리/컴포넌트 추상화에서 가끔 등장합니다.¹²

Effect Hooks

Effect Hooks는 네트워크, 브라우저 API, 구독, 타이머처럼 "React 밖의 시스템"과 연결·동기화할 때 사용합니다.² useEffect는 렌더 커밋 이후 실행되며, 필요하면 정리(cleanup) 함수를 반환해 이전 effect를 먼저 정리하고 다음 effect를 실행하게 만들 수 있습니다.¹ 또한 의존성 배열로 "어떤 값이 바뀔 때만 effect 재실행"을 제어합니다.¹

타이밍이 중요한 변형도 있습니다. useLayoutEffect는 브라우저 페인트 전에 실행되어 레이아웃 측정/동기 DOM 작업에 적합하고, useInsertionEffect는 React가 DOM을 바꾸기 전에 실행되어 CSS-in-JS 같은 라이브러리에서 동적 스타일을 주입할 때 주로 쓰입니다.²

Performance Hooks

Performance Hooks는 "불필요한 연산/리렌더링"을 줄이거나, "업데이트 우선순위"를 조절해 체감 성능을 높입니다.² useMemo는 비싼 계산 결과를 의존성 기반으로 캐시하고, useCallback은 자식에 내려주는 함수 참조를 캐시해 메모이제이션된 자식 컴포넌트 최적화에 도움을 줍니다.¹²

렌더링 우선순위를 나누고 싶을 때는 useTransition과 useDeferredValue를 봅니다. useTransition은 특정 상태 업데이트를 "non-blocking"으로 표시해 입력 같은 급한 업데이트를 먼저 처리하게 하고, useDeferredValue는 덜 중요한 값의 업데이트를 뒤로 미뤄 UI가 먼저 반응하도록 만듭니다.¹²

Other / Library Hooks

이 그룹은 앱 기능 구현보다 "도구/라이브러리" 성격이 강합니다. useId는 접근성(라벨-입력 연결 등)에 필요한 안정적인 고유 ID를 만들고, useDebugValue는 커스텀 훅이 DevTools에서 더 읽기 좋게 표시되도록 라벨을 붙입니다.¹² useSyncExternalStore는 Redux 같은 외부 스토어를 React와 안전하게 연결(동시성 렌더링 환경 포함)하기 위한 표준 구독 인터페이스입니다.¹²

Custom Hooks

내장 Hook을 조합해 도메인 로직을 useSomething() 형태로 추출하면, 컴포넌트에서 UI와 로직을 분리하고 여러 곳에서 재사용할 수 있습니다.³ 보통 useState/useReducer로 상태를 만들고, useEffect로 외부 동기화를 하고, 필요하면 useCallback/useMemo로 성능을 보강하는 식으로 구성됩니다.

Hooks 사용 규칙(짧게)

Hooks는 렌더마다 "호출 순서"로 내부 상태를 매칭하기 때문에, 조건문/반복문/중첩 함수 안에서 호출하면 안 되고 컴포넌트 최상단에서 호출해야 합니다.⁴ 이 제약이 Hooks가 호출 순서에 의존하는 설계(연결 리스트처럼 저장)와 맞물려 동작을 보장합니다.⁵

참고

¹Hooks API Reference - React (legacy)

²Built-in React Hooks - React

³Hooks - Preact Guide

⁴React Hooks: The only guide you'll ever need

⁵How hooks work | How React Works