TechLog
블로그로 돌아가기

pnpm/npm으로 Zustand 설치하는 법

tipreact

Zustand는 React 상태 관리 라이브러리 중에서 가장 가볍고 직관적인 녀석이다. Redux처럼 보일러플레이트 지옥에 빠질 일도 없고, 설정도 거의 없다. 이 글에서는 pnpm과 npm으로 Zustand를 설치하는 방법을 정리한다.

설치

npm

Bash
npm install zustand

pnpm

Bash
pnpm add zustand

끝이다. 진짜 이게 전부다.

TypeScript 지원

Zustand는 타입 정의가 패키지에 내장되어 있어서 @types/zustand 같은 걸 따로 설치할 필요가 없다. TypeScript 프로젝트에서 그냥 바로 쓰면 된다.

기본 사용법

설치가 됐으면 간단하게 스토어 하나 만들어보자.

TYPESCRIPT
import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

컴포넌트에서는 이렇게 쓴다.

React + TS
function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Provider로 감쌀 필요도 없고, 그냥 훅 호출하면 끝이다.

자주 같이 쓰는 미들웨어

Zustand에는 유용한 미들웨어가 몇 가지 내장되어 있다.

Bash
# 별도 설치 필요 없음 — zustand 패키지에 포함
  • persist — 상태를 localStorage 등에 자동 저장/복원
  • devtools — Redux DevTools 연동
  • immer — immer 미들웨어 (immer는 별도 설치 필요)

immer 미들웨어를 쓰려면 immer만 추가로 설치하면 된다.

Bash
# npm
npm install immer

# pnpm
pnpm add immer

버전 확인

설치 후 버전 확인은 이렇게 한다.

Bash
# npm
npm list zustand

# pnpm
pnpm list zustand

정리

항목내용
패키지명zustand
npm 설치npm install zustand
pnpm 설치pnpm add zustand
TypeScript내장 지원 (별도 타입 패키지 불필요)
번들 크기~1KB (gzipped)

Zustand는 작고, 빠르고, 쓰기 편하다. 복잡한 설정 없이 바로 상태 관리를 시작하고 싶다면 최고의 선택이다.

댓글