Zustand 상태 관리 라이브러리 베스트 프랙티스 가이드. create, createStore, useStore, useShallow 훅 사용, Slices Pattern, TypeScript 타이핑, persist/devtools/immer 미들웨어, Next.js SSR 통합, 리렌더 최적화 등 Zustand 기반 상태 관리 구현 시 참조.
Version: 5.x (v5) Doc Source: Official Zustand documentation
Zustand v5를 사용한 클라이언트 상태 관리 구현 시 베스트 프랙티스를 적용합니다. store 생성, selector 패턴, shallow 비교를 통한 리렌더 최적화, Slices Pattern으로 대규모 store 분할, TypeScript 타이핑, persist/devtools/immer 미들웨어 활용, Next.js SSR 통합 등 Zustand의 핵심 패턴을 올바르게 구현하도록 안내합니다.
npm install zustand
# Optional
npm install immer # immer middleware
npm install @redux-devtools/extension # devtools middleware
npm install use-sync-external-store # traditional (equality fn)
| 항목 | 설명 |
|---|---|
create<T>()(...) | TypeScript에서 curried form 필수 (제네릭 추론 한계) |
set shallow merge | set은 1단계만 merge, 중첩 객체는 spread 필요 |
set(state, true) | 두 번째 인자 true로 merge 대신 replace |
useShallow | selector 반환값의 shallow 비교로 불필요한 리렌더 방지 |
store.getInitialState() | store 리셋에 활용 |
| RSC 금지 | React Server Components에서 store 읽기/쓰기 금지 |
| 상황 | API |
|---|---|
| React에서 기본 store | create (zustand) |
| React 외부 (vanilla) | createStore (zustand/vanilla) |
| 커스텀 equality 체크 | createWithEqualityFn (zustand/traditional) |
| 타입 자동 추론 | combine middleware |
| 상황 | 훅 |
|---|---|
| create로 만든 store 사용 | useSomeStore((s) => s.value) |
| vanilla store를 React에서 사용 | useStore(store, selector) |
| 커스텀 equality 체크 | useStoreWithEqualityFn(store, selector, equalityFn) |
| 여러 프로퍼티 선택 (리렌더 최적화) | useShallow((s) => ({ a: s.a, b: s.b })) |
// 권장 순서: devtools를 가장 바깥에
create<Store>()(
devtools(
persist(
immer((set) => ({
// state & actions
})),
{ name: 'my-storage' },
),
),
)
devtools는 가능한 가장 바깥쪽에 위치시킵니다.
Updating state? → references/guides/01-updating-state.md
Immutable state and merging? → references/guides/04-immutable-state-and-merging.md
set shallow merge 동작, nested objects, replace flagMaps and Sets usage? → references/guides/05-maps-and-sets-usage.md
How to reset state? → references/guides/16-how-to-reset-state.md
store.getInitialState(), 다중 store 리셋No store actions? → references/guides/02-practice-with-no-store-actions.md
Slices pattern? → references/guides/03-slices-pattern.md
Flux inspired practice? → references/guides/15-flux-inspired-practice.md
Auto generating selectors? → references/guides/11-auto-generating-selectors.md
createSelectors 유틸리티, .use.property() 패턴Prevent rerenders with useShallow? → references/guides/06-prevent-rerenders-with-use-shallow.md
useShallow로 불필요한 리렌더 방지Beginner TypeScript? → references/guides/09-beginner-typescript.md
ExtractState, middlewares, async actionsAdvanced TypeScript? → references/guides/10-advanced-typescript.md
Next.js? → references/guides/12-nextjs.md
SSR and Hydration? → references/guides/13-ssr-and-hydration.md
Initialize state with props? → references/guides/14-initialize-state-with-props.md
Connect to state with URL hash? → references/guides/07-connect-to-state-with-url-hash.md
Event handler in pre-React 18? → references/guides/08-event-handler-in-pre-react-18.md
unstable_batchedUpdates 워크어라운드create? → references/apis/01-create.md
createStore? → references/apis/02-create-store.md
createWithEqualityFn? → references/apis/03-create-with-equality-fn.md
shallow? → references/apis/04-shallow.md
useStore? → references/hooks/01-use-store.md
useStoreWithEqualityFn? → references/hooks/02-use-store-with-equality-fn.md
useShallow? → references/hooks/03-use-shallow.md
persist? → references/middlewares/01-persist.md
devtools? → references/middlewares/02-devtools.md
immer? → references/middlewares/03-immer.md
combine? → references/middlewares/04-combine.md