Zustand나 Jotai 같은 경량 store는 Redux와 어떻게 다른가요?

Question

Accepted Answer

**Zustand**와 **Jotai**는 Redux보다 훨씬 적은 보일러플레이트로 글로벌 state를 달성하는 미니멀한 state 라이브러리이며, 불필요한 리렌더링을 피하기 위한 **선택적 구독**이 내장되어 있습니다. 멘탈 모델이 다릅니다: Zustand는 단일 store이고, Jotai는 원자(atomic) 방식입니다. ## Zustand — 단순한 hook 기반 store ```jsx import { create } from "zustand"; // store 정의: state + 그것을 갱신하는 action을 한곳에 const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // action/reducer/dispatch 없음 reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — count가 바뀔 때만 리렌더링 const increment = useStore((s) => s.increment); return ; } ``` provider도, action도, reducer도, dispatch도 없습니다 — setter 함수를 직접 호출합니다. selector(`s => s.count`)는 그 슬라이스가 바뀔 때*만* 컴포넌트가 리렌더링됨을 의미합니다. ## Jotai — 원자적 state ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // 아주 작은 state 조각 const doubleAtom = atom((get) => get(countAtom) * 2); // 파생 atom function Counter() { const [count, setCount] = useAtom(countAtom); // useState처럼 동작하지만 GLOBAL return ; } ``` Jotai는 합성하는 작은 **atom**들로 state를 구축합니다. 컴포넌트는 개별 atom을 구독하고 그 특정 atom이 바뀔 때만 리렌더링됩니다. ## Redux와의 비교 ```text Redux(고전) Zustand Jotai 보일러플레이트 높음(action/reducer) 매우 낮음 매우 낮음 Provider 필요 없음 최소 멘탈 모델 단일 store + dispatch 단일 store, hooks 원자적(useState 유사) 리렌더링 selector 필요 selector 내장 atom별(세밀) Devtools 탁월 양호 양호 번들 크기 더 큼 매우 작음(~1KB) 매우 작음 ``` ## 무엇을 언제 선택할까 ```text Zustand → 단순한 글로벌 state, 최소한의 격식(대부분 앱의 글로벌 요구) Jotai → 상향식/세밀한 state, 독립적인 조각이 많음, 파생 값 Redux(RTK) → 매우 큰 앱, 엄격한 구조, 풍부한 devtools/미들웨어 생태계 ``` ## 왜 중요한가 Zustand와 Jotai는 Redux의 보일러플레이트에서 벗어나, 선택적 구독이 내장된(Context의 리렌더링 문제를 해결) **미니멀하고 편리한** 글로벌 state로 향하는 현대적 흐름을 대표합니다. 이들이 존재한다는 것을 — 그리고 Zustand는 작은 단일 store 모델을, Jotai는 합성 가능한 atom을 제공한다는 것을 — 알면 대부분 앱의 글로벌 state 요구에 맞는 경량 도구를 고를 수 있고, 정말로 크고 복잡한 애플리케이션을 위해서는 더 무거운 Redux Toolkit을 남겨둘 수 있습니다. Context 대비 핵심 공통 이점은 과도한 렌더링을 막는 세밀한 구독입니다.