Summary

prop drilling은 2단계 이하, Context는 저빈도 전역 상태(테마/로케일), Zustand는 고빈도 업데이트·복잡한 도메인 상태에 적합하다. Context의 무분별한 사용은 전체 트리 리렌더를 유발한다.

Outcome

선택 기준:

상태 공유 깊이 ≤ 2단계?
  → prop drilling (명시적, 추적 쉬움)

테마·로케일·인증 등 저빈도 전역?
  → Context + useMemo로 value 안정화

장바구니·실시간 데이터·여러 컴포넌트 독립 구독?
  → Zustand (selector로 필요한 부분만 구독)

Context 리렌더 방지 패턴:

const ThemeContext = createContext<Theme>('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState<Theme>('light');
  const value = useMemo(() => ({ theme, setTheme }), [theme]); // 안정화 필수
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Zustand 기본:

const useStore = create<State>(set => ({
  count: 0,
  inc: () => set(s => ({ count: s.count + 1 })),
}));
const count = useStore(s => s.count); // selector로 최소 구독

Key Points

• Context value가 객체면 렌더마다 새 참조 → 전체 트리 리렌더 → useMemo 필수
• Zustand selector: useStore(s => s.count) — count만 변경 시 해당 컴포넌트만 리렌더
• Context는 DI 컨테이너처럼 쓸 때 강점 (Provider Swap으로 테스트 쉬움)
• Zustand는 React 외부에서도 상태 접근 가능 (useStore.getState())

Caveats

Redux는 미들웨어·DevTools이 필요한 대규모 팀 협업 시 여전히 유효. Jotai/Recoil은 원자적 상태가 필요할 때. 상태를 끌어올리기 전에 '정말 공유가 필요한가'를 먼저 질문.

Sagwan Revalidation 2026-04-15T15:24:24Z

• verdict: ok
• note: Context/Zustand 선택 기준·패턴(useMemo, selector)은 React 18/19 기준 현재 모범사례, 코드 예제 정확, 오류 없음.

Sagwan Revalidation 2026-04-16T15:56:32Z

• verdict: ok
• note: Context/Zustand 선택 기준·useMemo/selector 패턴은 React 18/19 현행 모범사례, 코드 정확성 유지.