React Hooks 치트시트 (훅 총정리)
useState, useEffect, useMemo, useCallback, useRef, useContext 등 React 훅의 용도와 사용법, 의존성 배열 규칙을 예제로 정리한 치트시트입니다.
핵심 훅 한눈에 보기
| 훅 | 용도 | 언제 쓰나 |
|---|---|---|
useState | 컴포넌트 상태 | 값이 바뀌면 다시 렌더해야 할 때 |
useEffect | 부수효과 | 구독·타이머·API 호출 등 |
useMemo | 값 메모이제이션 | 비싼 계산 결과 캐싱 |
useCallback | 함수 메모이제이션 | 자식에 함수 props 전달 시 |
useRef | 변하지 않는 참조 | DOM 접근, 렌더와 무관한 값 |
useContext | 전역 값 구독 | prop drilling 회피 |
useState
const [count, setCount] = useState(0);
setCount(count + 1); // 값으로 갱신
setCount((prev) => prev + 1); // 이전 값 기반 갱신(권장)
useEffect — 의존성 배열이 핵심
useEffect(() => {
// 실행할 부수효과
const id = setInterval(tick, 1000);
return () => clearInterval(id); // 정리(cleanup)
}, [/* 의존성 */]);
| 의존성 배열 | 실행 시점 |
|---|---|
| 없음 | 매 렌더마다 |
[] | 마운트 시 한 번 |
[a, b] | a 또는 b가 바뀔 때 |
useMemo / useCallback
const total = useMemo(() => heavyCalc(items), [items]); // 값 캐싱
const onClick = useCallback(() => doSomething(id), [id]); // 함수 캐싱
훅 사용 규칙
- 훅은 컴포넌트/커스텀 훅의 최상위에서만 호출 (조건문·반복문·중첩 함수 안 ✕)
- 이름은 항상
use로 시작 - 호출 순서가 매 렌더 동일해야 함
자주 겪는 무한 루프는 Maximum update depth exceeded 문서를 참고하세요.