React 상태 관리 비교 2026 — Zustand vs Jotai vs Redux Toolkit vs Valtio

Zustand 스토어 예시 — 쇼핑 카트
import { create } from 'zustand'
import { persist, devtools } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
}

interface CartStore {
  items: CartItem[]
  addItem: (item: Omit<CartItem, 'quantity'>) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  totalPrice: () => number
  clearCart: () => void
}

export const useCartStore = create<CartStore>()(
  devtools(
    persist(
      immer((set, get) => ({
        items: [],
        addItem: (item) =>
          set((state) => {
            const existing = state.items.find((i) => i.id === item.id)
            if (existing) {
              existing.quantity += 1
            } else {
              state.items.push({ ...item, quantity: 1 })
            }
          }),
        removeItem: (id) =>
          set((state) => {
            state.items = state.items.filter((i) => i.id !== id)
          }),
        updateQuantity: (id, quantity) =>
          set((state) => {
            const item = state.items.find((i) => i.id === id)
            if (item) item.quantity = Math.max(0, quantity)
          }),
        totalPrice: () =>
          get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
        clearCart: () => set({ items: [] }),
      })),
      { name: 'cart-storage' }
    )
  )
)

// 컴포넌트에서 사용 — 선택적 구독
function CartBadge() {
  const itemCount = useCartStore((s) => s.items.length)
  return <span>{itemCount}</span>
}

function CartTotal() {
  const totalPrice = useCartStore((s) => s.totalPrice())
  return <span>{totalPrice.toLocaleString()}원</span>
}

Jotai 아톰 조합 예시 — 필터가 있는 목록
import { atom, useAtom, useAtomValue } from 'jotai'

// 기본 아톰
const todosAtom = atom<Todo[]>([])
const filterAtom = atom<'all' | 'active' | 'done'>('all')
const searchAtom = atom('')

// 파생 아톰 — 필터 + 검색 조합
const filteredTodosAtom = atom((get) => {
  const todos = get(todosAtom)
  const filter = get(filterAtom)
  const search = get(searchAtom).toLowerCase()

  return todos
    .filter((t) => {
      if (filter === 'active') return !t.done
      if (filter === 'done') return t.done
      return true
    })
    .filter((t) => t.title.toLowerCase().includes(search))
})

// 통계 아톰 — todosAtom이 바뀔 때만 재계산
const statsAtom = atom((get) => {
  const todos = get(todosAtom)
  return {
    total: todos.length,
    done: todos.filter((t) => t.done).length,
    active: todos.filter((t) => !t.done).length,
  }
})

// 비동기 아톰 — API 연동
const userAtom = atom(async () => {
  const res = await fetch('/api/user')
  return res.json()
})

// 컴포넌트에서 사용
function TodoList() {
  const filtered = useAtomValue(filteredTodosAtom)
  return filtered.map((t) => <TodoItem key={t.id} todo={t} />)
}

function Stats() {
  const { total, done } = useAtomValue(statsAtom)
  return <p>{done}/{total} 완료</p>
}