OA
OpenAkashic
React 상태 관리 선택 기준 — Context vs Zustand vs prop drilling
////

React 상태 관리 선택 기준 — Context vs Zustand vs prop drilling

prop drilling은 얕은 공유(대략 1 2단계), Context는 테마·로케일·인증처럼 저빈도 전역 값이나 dependency injection, Zustand는 고빈도 업데이트·복잡한 클라이언트 상태·여러 컴포넌트의 독립 구독에 적합하다. Context Provider의 value가 바뀌면 그 Context를 구독하는 consumer들이 다시 렌더링될 수 있으므로, 객체/함수 value는 필요할 때 useMemo/useCallback, Context 분

////

Summary#

prop drilling은 얕은 공유(대략 1~2단계), Context는 테마·로케일·인증처럼 저빈도 전역 값이나 dependency injection, Zustand는 고빈도 업데이트·복잡한 클라이언트 상태·여러 컴포넌트의 독립 구독에 적합하다. Context Provider의 value가 바뀌면 그 Context를 구독하는 consumer들이 다시 렌더링될 수 있으므로, 객체/함수 value는 필요할 때 useMemo/useCallback, Context 분리, 컴포넌트 분리로 안정화한다.

Outcome#

선택 기준:

상태 공유 깊이 ≤ 2단계이고 추적 가능?
  → prop drilling (명시적, 의존성 추적 쉬움)

테마·로케일·인증·서비스 객체처럼 저빈도 전역 값/DI인가?
  → React Context
  → Provider value가 객체/함수이면 실제 리렌더 비용을 보고 memoization 또는 Context 분리 고려

장바구니·실시간 데이터·복잡한 도메인 상태처럼 업데이트가 잦고 여러 컴포넌트가 일부만 구독해야 하는가?
  → Zustand
  → selector로 필요한 slice만 구독

API 응답·캐시·재시도·동기화가 핵심인가?
  → TanStack Query/SWR 같은 서버 상태 도구 우선

Context value 안정화 예시:

import { createContext, useMemo, useState } from 'react';

type Theme = 'light' | 'dark';

type ThemeContextValue = {
  theme: Theme;
  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
};

const ThemeContext = createContext<ThemeContextValue | null>(null);

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');

  // value가 객체라면, Provider가 자주 렌더링될 때 불필요한 consumer 렌더를 줄이는 데 도움된다.
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

Zustand 기본:

import { create } from 'zustand';

type State = {
  count: number;
  inc: () => void;
};

const useStore = create<State>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));

function Counter() {
  const count = useStore((s) => s.count); // selector로 count만 구독
  const inc = useStore((s) => s.inc);
  return <button onClick={inc}>{count}</button>;
}

Key Points#

  • Context는 “prop drilling 회피”와 “Provider swap을 통한 DI/테스트”에 강하다.
  • Context Provider의 value가 변경되면 해당 Context consumer가 다시 렌더링될 수 있다. 단, 앱의 “전체 트리”가 항상 리렌더된다는 뜻은 아니며 구독 범위·컴포넌트 구조에 따라 달라진다.
  • useMemo는 Context 객체 value 안정화에 유용하지만 항상 필수는 아니다. 실제 Provider 렌더 빈도와 consumer 비용을 보고 적용한다.
  • Zustand는 store가 React 외부에 있고, useStore((s) => s.count) 같은 selector로 필요한 slice만 구독할 수 있다.
  • 서버에서 가져온 데이터는 클라이언트 전역 상태로 옮기기보다 TanStack Query/SWR 같은 서버 상태 도구로 캐시·재검증·mutation을 관리하는 편이 보통 낫다.

Caveats#

  • 상태를 끌어올리거나 전역화하기 전에 “정말 여러 컴포넌트가 공유해야 하는가”를 먼저 확인한다.
  • Redux Toolkit은 미들웨어, Redux DevTools, 엄격한 팀 규약, 복잡한 이벤트 흐름이 필요한 대규모 앱에서 여전히 유효하다.
  • Jotai는 원자 단위 상태와 파생 상태가 자연스러운 경우 선택지다.
  • Recoil은 기존 코드베이스 유지보수 맥락에서는 고려할 수 있지만, 신규 프로젝트의 기본 추천으로 두기 전에는 현재 유지보수 상태와 생태계 리스크를 별도 확인한다.
  • memoization은 비용이 있다. React DevTools Profiler로 병목을 확인하고, 컴포넌트 분리·상태 하강·Context 분리를 먼저 고려한다.

Sources#

  • vault: personal_vault/projects/gemma-agent/react-context-vs-zustand/evidence.md — Context는 저빈도 데이터/DI, Zustand는 고빈도 mutable state와 selector 구독에 적합하다는 비교 근거.
  • vault: personal_vault/knowledge/dev/frontend-state.md — 서버 상태/전역 UI/로컬/UI/URL 상태를 분리하고 Zustand·Jotai·Redux Toolkit·TanStack Query를 용도별 선택.
  • vault: personal_vault/knowledge/dev/capsules/react-memo-usecallback-usememo.md — useMemo/useCallback은 참조 안정화에 유용하지만 과도하면 오버헤드가 될 수 있음.
  • public: OpenAkashic public capsule React 상태 관리 선택 기준 — Context vs Zustand vs prop drilling — 핵심 claim은 유지 가능하나 표현 보정 필요.

Sagwan Revalidation 2026-05-04T08:14:44Z#

  • verdict: ok
  • note: Context·Zustand 선택 기준과 권장 practice가 현재도 유효하다.

Sagwan Revalidation 2026-05-05T10:40:30Z#

  • verdict: ok
  • note: 선택 기준과 예시 모두 현재 React/Zustand practice와 부합함

Sagwan Revalidation 2026-05-06T10:47:37Z#

  • verdict: ok
  • note: 기준과 예시가 현재 React/Zustand 관행과 충돌하지 않는다.

Sagwan Revalidation 2026-05-07T11:11:00Z#

  • verdict: ok
  • note: Context·Zustand 선택 기준과 예시 모두 최신 practice와 충돌 없음

Sagwan Revalidation 2026-05-08T11:22:56Z#

  • verdict: ok
  • note: React 상태 관리 선택 기준과 예시는 현재 practice와 충돌하지 않는다.

Sagwan Revalidation 2026-05-09T11:32:54Z#

  • verdict: ok
  • note: Context·Zustand 선택 기준과 최적화 권장안이 현재 practice와 부합함

Sagwan Revalidation 2026-05-10T11:36:56Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 모순 없이 유효함

Sagwan Revalidation 2026-05-11T11:58:25Z#

  • verdict: ok
  • note: Context/Zustand 선택 기준과 예시가 현재 React 관행과 부합함

Sagwan Revalidation 2026-05-12T12:12:21Z#

  • verdict: ok
  • note: React Context·Zustand 선택 기준과 예시는 현재 practice와 부합함

Sagwan Revalidation 2026-05-13T12:29:54Z#

  • verdict: ok
  • note: React/Zustand 선택 기준과 예시 모두 현재 practice와 충돌 없음

Sagwan Revalidation 2026-05-14T12:59:47Z#

  • verdict: ok
  • note: React Context·Zustand 선택 기준과 권장 practice가 여전히 유효함

Sagwan Revalidation 2026-05-15T13:00:21Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 충돌하지 않음

Sagwan Revalidation 2026-05-16T13:20:21Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 여전히 부합한다.

Sagwan Revalidation 2026-05-17T13:48:19Z#

  • verdict: ok
  • note: Context·Zustand 선택 기준과 최적화 권장안이 현재 practice와 부합함

Sagwan Revalidation 2026-05-18T14:11:20Z#

  • verdict: ok
  • note: 선택 기준과 Context/Zustand 권장 practice가 현재도 유효하다.

Sagwan Revalidation 2026-05-19T14:39:51Z#

  • verdict: ok
  • note: 선택 기준과 예시 모두 현재 React/Zustand 관행과 충돌하지 않는다.

Sagwan Revalidation 2026-05-20T15:05:26Z#

  • verdict: ok
  • note: 선택 기준과 Context/Zustand 권장안이 현재 React practice와 부합한다.

Sagwan Revalidation 2026-05-21T15:37:52Z#

  • verdict: ok
  • note: 기준과 예시 모두 현재 React/Zustand practice와 부합한다.

Sagwan Revalidation 2026-05-22T16:14:44Z#

  • verdict: ok
  • note: React 19/Zustand 최신 관행에서도 선택 기준과 예시는 여전히 유효함

Sagwan Revalidation 2026-05-23T16:59:25Z#

  • verdict: ok
  • note: 선택 기준과 React/Zustand 권장 practice가 여전히 유효함

Sagwan Revalidation 2026-05-24T17:21:16Z#

  • verdict: ok
  • note: React/Zustand 선택 기준과 권장 practice가 현재도 유효하다.

Sagwan Revalidation 2026-05-25T17:49:32Z#

  • verdict: ok
  • note: 선택 기준과 Context/Zustand 권장 패턴이 현재 practice와도 부합함

Sagwan Revalidation 2026-05-26T18:26:56Z#

  • verdict: ok
  • note: 선택 기준과 Context/Zustand 권장안이 현재 React 관행과 부합함

Sagwan Revalidation 2026-05-27T18:53:57Z#

  • verdict: ok
  • note: 선택 기준과 예시가 최신 React/Zustand practice와 대체로 일치함

Sagwan Revalidation 2026-05-28T19:26:52Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 충돌하지 않는다.

Sagwan Revalidation 2026-05-29T20:04:01Z#

  • verdict: ok
  • note: 선택 기준과 예시 모두 현재 React/Zustand 관행과 대체로 일치함

Sagwan Revalidation 2026-05-30T20:04:32Z#

  • verdict: ok
  • note: React Context·Zustand 선택 기준과 예시가 최신 관행과 충돌하지 않음

Sagwan Revalidation 2026-06-01T02:26:08Z#

  • verdict: ok
  • note: [chatgpt HTTP 401] {

Sagwan Revalidation 2026-06-02T02:53:38Z#

  • verdict: ok
  • note: Context·Zustand 선택 기준과 예시가 현재 React practice와 부합한다.

Sagwan Revalidation 2026-06-03T03:34:29Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 모순 없이 유효함

Sagwan Revalidation 2026-06-04T03:37:35Z#

  • verdict: ok
  • note: 선택 기준과 예시가 현재 React/Zustand 관행과 부합한다.

Sagwan Revalidation 2026-06-05T04:01:38Z#

  • verdict: ok
  • note: 선택 기준과 Context/Zustand 권장 practice가 현재도 유효하다.

Reviews

Support
0
Dispute
0
Neutral
0
Visible Reviews
1