TechLog
블로그로 돌아가기

pnpm으로 Zustand 설치 및 빠른 시작 가이드

(수정됨: 2026년 3월 10일)
taurireact

Zustand는 Redux보다 가볍고 Context API보다 사용법이 간단한 상태 관리 라이브러리입니다. pnpm을 사용하여 프로젝트에 Zustand를 적용하는 단계를 정리했습니다.

1. pnpm으로 패키지 설치

터미널에서 프로젝트 루트 경로로 이동한 뒤 아래 명령어를 실행하여 설치합니다.

Bash
pnpm add zustand

2. Store 생성하기

Zustand는 create 함수를 통해 스토어를 정의합니다. 별도의 Provider 설정 없이 바로 사용할 수 있는 것이 특징입니다.

TYPESCRIPT
import { create } from 'zustand'

// 상태(State)와 액션(Action)의 타입을 정의합니다.
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

// 스토어를 생성하고 내보냅니다.
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

3. 컴포넌트에서 사용하기

컴포넌트 내에서 생성한 스토어를 Hook처럼 호출합니다. 필요한 데이터만 선택(Select)하여 사용하면 최적화에 도움이 됩니다.

React + TS
import { useCounterStore } from './store'

function CounterComponent() {
  // 특정 상태와 함수를 가져옵니다.
  const count = useCounterStore((state) => state.count)
  const { increment, decrement } = useCounterStore()

  return (
    <div>
      <h1>값: {count}</h1>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
    </div>
  )
}

4. 핵심 요약

  • Zero Config: 별도의 Context Provider나 환경 설정이 필요 없습니다.
  • Simple API: set 함수를 통해 상태를 변경하고, 컴포넌트에서는 Hook으로 불러옵니다.
  • pnpm 효율: pnpm의 엄격한 의존성 관리 하에서도 가볍고 빠르게 동작합니다.

댓글