상태 관리 전략 비교 (Context vs Zustand vs Redux)

상태 관리 전략 비교 (Context vs Zustand vs Redux)

항목Context + useReducerZustandRedux Toolkit

전역 상태	✅	✅	✅
비동기 처리	❌ 직접 처리 필요	✅ 내장	✅ createAsyncThunk
러닝 커브	낮음	매우 낮음	높음 (툴킷으로 개선됨)
리렌더링 제어	❌ 어려움	✅ 섬세함	✅ middleware 조합 가능
규모 확장성	작음	중소형 적합	대형 프로젝트에 최적

✅ Zustand는 빠르게 쓰고 유지하기 쉬운 경량 상태 관리 도구로 최근 인기도 높음

tsx

복사편집

// zustand 예제
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increase } = useStore();
  return <button onClick={increase}>Count: {count}</button>;
}