React 상태 관리 Redux vs Zustand vs Jotai 추천

세 라이브러리를 비교해드릴게요.

Redux Toolkit

• 대규모 앱, 복잡한 상태 로직, 미들웨어 필요 시


• DevTools 최고, 팀 규모 클 때 구조화에 유리


• 보일러플레이트 多 (RTK로 많이 줄었지만)

Zustand

• 간단하고 직관적, 러닝 커브 낮음


• Provider 불필요, SSR 호환 좋음


• 중소규모 프로젝트에 최적

import { create } from 'zustand'

const useStore = create((set) => ({
  cart: [],
  addItem: (item) => set((s) => ({ cart: [...s.cart, item] })),
  theme: 'light',
  toggleTheme: () => set((s) => ({ 
    theme: s.theme === 'light' ? 'dark' : 'light' 
  })),
}))

Jotai

• atom 단위로 상태 관리 (React의 useState 확장판)


• 파생 상태(derived state)가 많을 때 유리


• 컴포넌트 레벨 상태에 가까운 느낌

프로젝트 규모와 Next.js App Router 환경을 고려하면 Zustand을 추천합니다. Provider 없이 동작하고, SSR과도 잘 맞습니다.

감사합니다! Zustand으로 가려고 하는데, persist 미들웨어로 localStorage에 저장하는 것도 잘 되나요? 장바구니를 새로고침해도 유지하고 싶어서요.

네, Zustand의 persist 미들웨어가 아주 간편합니다!

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useCartStore = create(
  persist(
    (set) => ({
      cart: [],
      addItem: (item) => set((s) => ({ cart: [...s.cart, item] })),
      clearCart: () => set({ cart: [] }),
    }),
    { name: 'cart-storage' }  // localStorage key
  )
)

Next.js SSR에서 hydration mismatch를 피하려면 클라이언트에서만 persist된 값을 읽도록 처리해주세요.

완벽해요! 바로 적용해봤는데 정말 간단하네요. Redux에서 이걸 하려면 redux-persist 패키지까지 설치해야 했는데... Zustand 최고입니다. 감사합니다! 🎯