Context는 모든 레벨에 props를 전달하지 않고도(prop drilling) 값을 전체 하위 트리와 공유할 수 있게 해줍니다. context를 생성하고, 하위 트리를 그 Provider로 감싸면, 어떤 자손이든 useContext로 이를 읽을 수 있습니다.
jsx
= ();
() {
(
);
}
() {
theme = ();
;
}
많은 컴포넌트가 필요로 하는 저빈도의 "전역적" 데이터: 테마, 현재 사용자, 로케일, 기능 플래그.
Provider의 value가 변경되면 context를 소비하는 모든 컴포넌트가 re-render됩니다 — 그 일부만 구독할 방법은 없습니다. 두 가지 실질적 결과:
// ❌ 매 render마다 NEW 객체 → 모든 소비자가 매번 re-render
<Ctx.Provider value={{ user, setUser }}>
// ✅ value를 memoize하여 실제로 변경될 때만 변경되도록 함
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
자주 변경되는 또는 큰 state의 경우, context를 더 작은 조각으로 나누거나 선택적 구독을 지원하는 store(Zustand/Redux)를 사용하세요. Context는 의존성 주입 도구이지 완전한 state 매니저가 아닙니다.