pnpm/npm으로 Zustand 설치하는 법

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로 감쌀 필요 없이 훅을 호출하면 돼요. 위처럼 스토어 전체를 꺼내면 상태가 바뀔 때마다 컴포넌트가 다시 렌더링되니, 필요한 값만 쓰려면 useCounterStore((state) => state.count)처럼 selector로 골라 쓰는 게 좋아요.

자주 같이 쓰는 미들웨어

Zustand에는 유용한 미들웨어가 몇 가지 들어 있어요. 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)