Context는 언제 좋은 state 해결책이고 언제 아닌가요?

Question

Accepted Answer

React의 **Context API**는 prop drilling 없이 컴포넌트 하위 트리 전체와 값을 공유할 수 있게 해줍니다. **낮은 빈도로 변하면서 널리 공유되는** 데이터에 훌륭합니다 — 하지만 완전한 state management 해결책은 *아니며*, 자주 변하는 state에 대해서는 리렌더링 함정이 있습니다. ## Context가 빛나는 경우 ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* 어떤 자손이든 theme을 읽을 수 있음 — prop drilling 없음 */} ); } ``` ```text 좋은 적합 사례(널리 읽히지만 드물게 변하는 데이터): ✓ 테마(다크/라이트) ✓ 현재 사용자 / 인증 ✓ 로케일 / i18n ✓ 앱 전역 설정 또는 기능 플래그 ``` ## 함정: 변경 시 모든 consumer가 리렌더링됨 ```jsx // ❌ 자주 변하는 context 값은 모든 consumer를 리렌더링 const AppContext = createContext(); // value = { user, cart, notifications, ...모든 것 } // → 한 필드만 갱신해도 context를 쓰는 모든 컴포넌트가 리렌더링됨 ``` context 값이 변하면, 바뀐 부분을 사용하는지와 무관하게 그 context를 소비하는 **모든** 컴포넌트가 리렌더링됩니다. 자주 갱신되는 state의 경우 이는 성능 문제를 일으킵니다. Context에는 선택적 구독 기능이 내장되어 있지 않습니다. ## 완화책과 대안 ```text ✓ 초점이 분명한 여러 context로 분할(ThemeContext, UserContext를 따로) ✓ 값 객체를 메모이즈(useMemo)하여 불필요하게 정체성이 바뀌지 않게 함 ✗ 하지만 고빈도이거나 큰 공유 state의 경우 → 실제 store를 사용 ``` state 라이브러리(Zustand, Redux, Jotai)는 **선택적 구독**으로 리렌더링 문제를 해결합니다 — 컴포넌트가 사용하는 슬라이스만 구독하고 그것이 바뀔 때만 리렌더링됩니다: ```js const count = useStore(s => s.count); // count가 바뀔 때만 리렌더링 ``` ## Context는 state 관리자가 아님 ```text Context = 값을 아래로 전달하는 TRANSPORT(전달) 메커니즘이지, state management 자체가 아님. 여전히 state를 보유하려면 useState/useReducer가 필요하며, Context는 그것을 분배만 함. ``` ## 왜 중요한가 Context의 적합 영역 — 그리고 그 한계 — 을 아는 것은 두 가지 흔한 실수를 막아줍니다: Context에 있어야 할 것을 prop drilling하는 것, 그리고 고빈도 state를 Context에 넣는 것(앱 전역 리렌더링을 유발). 규칙은 이렇습니다: **드물게 변하고 널리 공유되는** 값(테마, 사용자, 로케일)에는 Context를, **자주 변하거나 큰** 공유 state에는 선택적 구독을 가진 전용 store를. Context가 state를 분배하지만 관리하지는 않는다는 점을 이해하면, 언제 충분하고 언제 더 필요한지가 명확해집니다.