1. 설치하기

zustand를 설치한다.

# npm을 쓰는 경우
npm install zustand

# yarn을 쓰는 경우
yarn add zustand

# pnpm을 쓰는 경우
pnpm add zustand

2. 저장소 파일 만들고 상태 정의

src/store/useStore.ts

import { create } from 'zustand'

// (1) 스토어가 가질 상태와 액션 타입 정의 (TypeScript 사용 시)
interface CounterState {
  count: number
  increase: () => void
  reset: () => void
}

// (2) create로 스토어 생성
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,                             // 초기 상태
  increase: () => set((state) => ({     // 액션: count++
    count: state.count + 1
  })),
  reset: () => set({                    // 액션: 초기화
    count: 0
  }),
}))

set의 역할

create 함수가 호출될 때, 내부적으로 set(업데이트 함수)과 get(현재 상태를 읽는 함수)을 자동으로 주입해 준다.

1. 객체로 업데이트

   • 단순 대입
   • 얕은 병합

   // 스토어에 { a: 1, b: 2, c: 3 }가 있을 때…
   set({ b: 42 })
   // 결과: { a: 1, b: 42, c: 3 }

2. 함수 콜백으로 업데이트

   • 이전 상태(state)를 참고해서 새 값을 계산
   • 콜백 인자인 state는 “업데이트 직전의 상태”

   // count 값을 이전 값에 +1 해서 업데이트
   set((state) => ({ count: state.count + 1 }))

get의 역할

현재 스토어의 전체 상태를 즉시 조회할 수 있는 기능, 스토어 내에서만 사용할 수 있다.

create((set, get) => ({
  count: 0,
  doubleIfOdd: () => {
    const { count } = get()            // 현재 count 읽기
    if (count % 2 === 1) {
      set({ count: count * 2 })        // 조건부로 업데이트
    }
  }
}))

위 코드에서 doubleIfOdd는 count라는 변수가 존재하지 않아 get을 이용하여 count를 불러와줘야한다.
왜냐하면 count는 자바스크립트의 변수가 아니라 '스토어 객체의 프로퍼티'이기 때문에 doubleIfOdd에서 get으로 호출해주어야 값을 가져올 수 있다.

3. 컴포넌트에 가져와 사용하기

import React from 'react'
import { useCounterStore } from '@/store/useStore'

export default function Counter() {
  const { count, increase, reset } = useCounterStore()
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={increase}>+1</button>
      <button onClick={reset}>리셋</button>
    </div>
  )
}