매일 사용하는 React 훅을 역할별로 묶었습니다. state 저장, effect 실행, 메모이제이션, context 공유, 렌더 밖 접근. 각 행은 훅과 그 용도를 짝지어 보여줍니다.
훅은 함수 컴포넌트가 React의 기능(state, 라이프사이클, context, 성능 튜닝)에 접근하게 해주는 함수입니다. 두 가지 규칙이 있습니다. 훅은 최상위 레벨에서 호출할 것(루프나 조건 안에서는 절대 호출하지 않는다). 그리고 React 함수에서만 호출할 것. 나머지는 일에 맞는 훅을 고르는 일입니다.
참고 표 · 24 항목
React HooksExplained
24 of 24 rows
State
변경되면 다시 렌더를 일으키는 단일 값을 저장한다.
컴포넌트 로컬 state: 폼 필드, 토글, 카운터.
액션 리듀서로 구동되는 state를 저장한다. 작은 스토어처럼.
여러 관련 필드가 있거나 전환이 복잡한 state.
다시 렌더를 일으키지 않는 변경 가능한 값을 저장한다.
변경 가능한 컨테이너, 타이머, .current를 통한 직접 DOM 접근.
Effect
렌더 후에 사이드 이펙트를 실행한다. 정리(cleanup) 함수는 선택.
데이터 페칭, 구독, 외부 시스템과의 동기화.
이펙트가 반환하는 함수는 다음 이펙트 전과 언마운트 시에 다시 실행된다.
구독과 타이머 해제, 진행 중인 fetch 중단.
useEffect와 같지만 DOM 변경 직후 동기적으로 실행된다.
브라우저가 페인트하기 전에 레이아웃을 읽거나 쓰기(토스트, 툴팁).
이벤트 핸들러는 사용자 동작에 응답해 실행되고, 이펙트는 동기화를 위해 렌더 후에 실행된다.
사용자가 일으킨 로직은 핸들러에, 렌더가 일으킨 로직은 이펙트에 둔다.
개발 모드에서 컴포넌트를 두 번 마운트해 이펙트가 실행, 정리, 다시 실행되게 한다.
프로덕션 전에 이중 구독과 누락된 정리를 잡아낸다.
성능
의존성이 바뀔 때까지 계산된 값을 캐시한다.
렌더 간 비용 큰 재계산 회피. 의도적으로 deps의 값을 바꾸면 캐시를 무효화할 수 있다.
의존성이 바뀔 때까지 함수 참조를 캐시한다.
메모이즈된 자식에 넘기거나 deps로 쓰는 안정적인 콜백.
props가 바뀌지 않은 컴포넌트의 다시 렌더를 건너뛴다.
무거운 자식 컴포넌트. 얕은 비교로 부족하면 두 번째 인자로 비교 함수를 넘긴다(HOC이지 훅이 아니다).
Context와 외부 핸들
prop 드릴링 없이 context 값을 읽는다.
트리 전체에서 공유되는 테마, 로케일, 인증 사용자.
ref를 통해 부모가 보는 인스턴스를 커스터마이즈한다.
forwardRef로 자식에서 좁은 API를 노출하기.
동시성과 기타
state 업데이트를 긴급하지 않음으로 표시해 UI의 응답성을 유지한다.
무거운 목록이 다시 렌더되는 동안 입력을 가볍게 유지하기.
값을 지연시켜 업데이트가 중단 가능하게 한다.
타이머 없이 비용 큰 렌더를 디바운스하기.
접근성 속성용으로 안정적인 고유 id를 생성한다.
서버와 클라이언트 렌더에서 label과 input을 연결하기.
렌더 중에 promise나 context를 읽는다. 조건부로 호출할 수 있는 유일한 훅.
Suspense와 함께 promise를 풀거나, early return 안에서 context 읽기.
폼 액션으로 구동되는 state를 저장하며 pending 플래그가 포함된다.
오류나 갱신된 state를 반환해 인라인으로 보여주는 폼 제출.
낙관적 값을 즉시 렌더하고, 액션이 끝나면 실제 state로 되돌아간다.
서버 요청이 진행 중인 동안 좋아요나 전송된 메시지 보여주기.
props 없이 감싸고 있는 <form>의 pending 상태를 읽는다.
부모 폼이 제출되는 동안 스스로 비활성화하는 제출 버튼.
React 바깥의 스토어를 구독하고 일관된 스냅샷 하나를 읽는다.
온라인 상태 같은 브라우저 API, 또는 서드파티 state 스토어.
layout effect 이전에 실행되며, CSS-in-JS 규칙 주입을 위해 만들어졌다.