Zustand 완벽 가이드: React 상태 관리를 단순하게 만드는 법

npm install zustand

import { create } from 'zustand'

type CounterState = {
  count: number
  increment: () => void
  decrement: () => void
  reset: () => void
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

function Counter() {
  const count = useCounterStore((state) => state.count)
  const increment = useCounterStore((state) => state.increment)
  const reset = useCounterStore((state) => state.reset)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={reset}>초기화</button>
    </div>
  )
}

const useStore = create<StoreState>((set, get) => ({
  items: [],
  totalCount: () => get().items.length,
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}))

// 유틸리티 함수, API 호출 로직 등에서 활용
const currentCount = useCounterStore.getState().count
useCounterStore.setState({ count: 0 })

import { create } from 'zustand'

// 상태와 액션을 분리하여 타입 정의
type State = {
  user: { id: string; name: string; email: string } | null
  theme: 'light' | 'dark'
  notifications: number
}

type Actions = {
  setUser: (user: State['user']) => void
  toggleTheme: () => void
  addNotification: () => void
  clearNotifications: () => void
}

const useAppStore = create<State & Actions>((set) => ({
  user: null,
  theme: 'light',
  notifications: 0,
  setUser: (user) => set({ user }),
  toggleTheme: () =>
    set((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    })),
  addNotification: () =>
    set((state) => ({ notifications: state.notifications + 1 })),
  clearNotifications: () => set({ notifications: 0 }),
}))

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

type SettingsStore = {
  theme: 'light' | 'dark'
  language: string
  setTheme: (theme: 'light' | 'dark') => void
  setLanguage: (lang: string) => void
}

const useSettingsStore = create<SettingsStore>()(
  persist(
    (set) => ({
      theme: 'light',
      language: 'ko',
      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'settings-storage', // localStorage 키 이름
      storage: createJSONStorage(() => localStorage), // 기본값
    },
  ),
)

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

const useStore = create<StoreState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () =>
        set(
          (state) => ({ count: state.count + 1 }),
          undefined,
          'counter/increment' // DevTools에 표시되는 액션 이름
        ),
    }),
    { name: 'CounterStore' },
  ),
)

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

type TodoStore = {
  todos: { id: string; text: string; done: boolean }[]
  addTodo: (text: string) => void
  toggleTodo: (id: string) => void
}

const useTodoStore = create<TodoStore>()(
  immer((set) => ({
    todos: [],
    addTodo: (text) =>
      set((state) => {
        state.todos.push({ id: crypto.randomUUID(), text, done: false })
      }),
    toggleTodo: (id) =>
      set((state) => {
        const todo = state.todos.find((t) => t.id === id)
        if (todo) todo.done = !todo.done
      }),
  })),
)

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

const useStore = create<StoreState>()(
  devtools(
    persist(
      immer((set) => ({
        // 스토어 정의
      })),
      { name: 'store-key' },
    ),
    { name: 'StoreName' },
  ),
)

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

type User = {
  id: string
  name: string
  email: string
}

type AuthStore = {
  user: User | null
  token: string | null
  isAuthenticated: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => void
}

const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      isAuthenticated: false,
      login: async (email, password) => {
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
        })

        if (!response.ok) {
          throw new Error('로그인에 실패했습니다')
        }

        const { user, token } = await response.json()
        set({ user, token, isAuthenticated: true })
      },
      logout: () => {
        set({ user: null, token: null, isAuthenticated: false })
      },
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({ token: state.token }), // 토큰만 영속화
    },
  ),
)

// 컴포넌트에서 사용
function LoginButton() {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
  const login = useAuthStore((s) => s.login)
  const logout = useAuthStore((s) => s.logout)

  if (isAuthenticated) {
    return <button onClick={logout}>로그아웃</button>
  }

  return <button onClick={() => login('user@example.com', 'pw')}>로그인</button>
}

// API 요청 시 토큰 활용 (컴포넌트 외부)
async function fetchWithAuth(url: string) {
  const token = useAuthStore.getState().token
  return fetch(url, {
    headers: { Authorization: `Bearer ${token}` },
  })
}

import { create, StateCreator } from 'zustand'

// 각 슬라이스 타입 정의
type AuthSlice = {
  isLoggedIn: boolean
  login: () => void
  logout: () => void
}

type UISlice = {
  sidebarOpen: boolean
  toggleSidebar: () => void
}

type AppStore = AuthSlice & UISlice

// 슬라이스 구현
const createAuthSlice: StateCreator<AppStore, [], [], AuthSlice> = (set) => ({
  isLoggedIn: false,
  login: () => set({ isLoggedIn: true }),
  logout: () => set({ isLoggedIn: false }),
})

const createUISlice: StateCreator<AppStore, [], [], UISlice> = (set) => ({
  sidebarOpen: false,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
})

// 스토어 합성
const useAppStore = create<AppStore>()((...args) => ({
  ...createAuthSlice(...args),
  ...createUISlice(...args),
}))

import { create } from 'zustand'

type Product = { id: string; name: string; price: number }

type ProductStore = {
  products: Product[]
  isLoading: boolean
  error: string | null
  fetchProducts: () => Promise<void>
}

const useProductStore = create<ProductStore>((set) => ({
  products: [],
  isLoading: false,
  error: null,
  fetchProducts: async () => {
    set({ isLoading: true, error: null })
    try {
      const res = await fetch('/api/products')
      if (!res.ok) throw new Error('Failed to fetch products')
      const products: Product[] = await res.json()
      set({ products, isLoading: false })
    } catch (err) {
      set({ error: (err as Error).message, isLoading: false })
    }
  },
}))

// Zustand: 클라이언트 상태만 관리
const useUIStore = create<UIStore>((set) => ({
  sidebarOpen: false,
  theme: 'dark' as const,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  setTheme: (theme: 'light' | 'dark') => set({ theme }),
}))

// TanStack Query: 서버 상태 관리
function useTodos() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then((r) => r.json()),
  })
}

// 컴포넌트에서 자연스럽게 조합
function TodoPage() {
  const sidebarOpen = useUIStore((s) => s.sidebarOpen)
  const { data: todos, isLoading } = useTodos()

  return (
    <Layout sidebar={sidebarOpen}>
      {isLoading ? <Spinner /> : <TodoList todos={todos} />}
    </Layout>
  )
}

// BAD: 스토어 전체를 구독 — 어떤 상태가 바뀌어도 리렌더링
function Component() {
  const store = useStore()
  return <div>{store.count}</div>
}

// GOOD: 필요한 상태만 구독
function Component() {
  const count = useStore((state) => state.count)
  return <div>{count}</div>
}

import { useShallow } from 'zustand/react/shallow'

// BAD: 매번 새 객체를 생성하여 항상 리렌더링
const { bears, fishes } = useStore((state) => ({
  bears: state.bears,
  fishes: state.fishes,
}))

// GOOD: useShallow로 얕은 비교 적용
const { bears, fishes } = useStore(
  useShallow((state) => ({
    bears: state.bears,
    fishes: state.fishes,
  })),
)