05. Context API & 전역 상태 최적화
React
Context
Global State
Prop Drilling을 끊어내고, 7가지 설계 패턴으로 전역 상태의 함정을 피하며 고속도로를 완성하라.
전역 상태(Global State)의 설계: Prop Drilling을 넘어서는 데이터 고속도로
무엇인가:
트리 깊이에 관계없이 데이터를 직접 전달하는 공유 저장소 모델. createContext로 터널을 뚫고, Provider로 값을 주입하며, useContext로 어디서든 꺼낸다.
왜 쓰는가: 불필요한 Props 전달(Drilling)을 막고 앱 공통 데이터를 효율적으로 관리하기 위해. 단, Context는 전파 최적화가 없으므로 잘못 설계하면 과다 리렌더링의 주범이 된다.
언제 쓰는가: 테마, 유저 인증, 언어 설정 등 앱 전반에 걸친 공유 데이터가 필요할 때. 자주 바뀌는 데이터는 Zustand 등 외부 상태 관리 라이브러리를 고려하라.
1관문. Context Selector Pattern
Context를 분리하여 count 변경이 theme 소비자를 리렌더하지 않도록 최적화하라.
2관문. Multiple Providers
AuthContext, ThemeContext, CartContext를 도메인별로 분리하고 조합 Provider로 정리하라.
3관문. State Colocation in Context
앱 루트가 아닌 가장 가까운 공통 조상에 Provider를 배치하여 영향 범위를 최소화하라.
4관문. Zustand Interop
Zustand selector로 컴포넌트가 필요한 상태만 구독하여 과다 리렌더를 방지하라.
5관문. Dependency Injection
Context를 통해 API 서비스를 주입하여 테스트 시 Mock 서비스로 교체 가능하도록 만들어라.
6관문. Runtime Error Guard
Provider 없이 useContext를 호출했을 때 의미 있는 에러를 던지는 안전한 훅 래퍼를 만들어라.
7관문. Hydration Warning
서버와 클라이언트의 초기 상태 불일치로 발생하는 Hydration 경고를 올바르게 해결하라.