통합 요약노트
Ch.22 React 심화 — 상태 관리 패턴
Props Drilling, useContext, Zustand, 커스텀 훅
이 챕터의 내용
Props Drilling 문제
Props Drilling — 깊은 계층에 데이터를 전달하기 위해 중간 컴포넌트를 관통하는 패턴입니다.
부모 → 자식 → 손자 props를 관통시키는 패턴입니다
Layout, Main은 user를 쓰지도 않으면서 전달만 합니다. 이것이 Props Drilling의 핵심 문제입니다.
2~3단계는 OK 5단계 이상이면 대안을 찾으세요
useContext — React의 전역 상태
Context API — React 내장 기능으로, Provider로 감싼 모든 자식 컴포넌트가 데이터를 공유합니다.
3단계로 Context를 만듭니다 생성 → 제공 → 사용
어떤 깊이에서든 useContext 한 줄이면 됩니다
라이트/다크 모드 전환 Context의 대표적 사용 사례입니다
Zustand — 가벼운 상태 관리
Zustand — 독일어로 '상태'. 최소한의 코드로 전역 상태를 관리합니다.
Zustand은 Redux의 보일러플레이트를 95% 줄였습니다
create() 함수 하나로 상태와 액션을 한 번에 정의합니다
store를 훅처럼 호출하면 끝 Provider도 필요 없습니다
커스텀 훅 — 로직 재사용
커스텀 훅 — use로 시작하는 함수에 로직을 추출하면 어디서든 재사용할 수 있습니다.
use로 시작하는 함수 = 커스텀 훅입니다
데이터, 로딩, 에러를 하나의 훅으로 묶습니다
자주 쓰는 패턴을 커스텀 훅으로 만들어두세요
핵심 용어 모음
Context API
React 내장. 전역 데이터 공유. 간단한 경우에 적합
Zustand
가볍고 직관적인 상태 관리 라이브러리. 보일러플레이트 최소
컴포넌트 합성
children으로 직접 전달. 구조 자체를 바꾸는 방법
보일러플레이트
Redux: action + reducer + dispatch / Zustand: create() 하나
Provider
Redux: Provider 필수 / Zustand: 불필요
번들 크기
Redux: ~16KB / Zustand: ~1KB
학습 곡선
Redux: 높음 / Zustand: 낮음 (5분이면 시작)
선택적 구독
s => s.todos처럼 필요한 값만 선택하면 해당 값이 바뀔 때만 리렌더
전체 구독 금지
useTodoStore()처럼 전체를 구독하면 어떤 값이든 바뀔 때마다 리렌더
이름은 use로 시작
useUser, useFetch, useTheme 등
내부에서 훅 사용 가능
useState, useEffect 등 React 훅을 자유롭게 조합
값을 반환
상태, 함수, 객체 등 필요한 것을 반환
비교 정리
| 항목 | 괜찮은 경우 | 문제가 되는 경우 |
|---|---|---|
| 깊이 | 2~3단계 | 5단계 이상 |
| 사용 범위 | 특정 서브트리에서만 필요 | 앱 전체에서 필요 (테마, 유저 정보) |
| 유지보수 | 컴포넌트 수가 적음 | 중간 컴포넌트 수정 시 연쇄 변경 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기