[Frontend] Zustand

목차 (OPEN)

• 🐻 Zustand란?
• ✨ 상태 관리란?
• 😵 기존 상태 관리 라이브러리의 문제점
• 🚀 핵심 특징
• 🛠 설치 및 사용 방법
• 🤔 Zustand를 사용해야 하는 이유
• 🧠 결론

 

 

 

 

 

🐻 Zustand란?

React에서 사용하는 상태 관리 라이브러리

 

Zustand는 React 앱에서 컴포넌트 간에 데이터를 더 편하게 주고받을 수 있도록 도와주는 도구이다.

이 글에서는 Zustand가 어떤 역할을 하는지, 왜 필요한지, 어떻게 사용하는지를 차근차근 알아보고자 한다.

 

---

✨ 상태 관리란?

React에서는 컴포넌트 간에 데이터를 주고받을 때 state (상태)를 사용한다.

예를 들어, 로그인 여부나 다크 모드 설정처럼 여러 컴포넌트에서 함께 사용하는 값이 있다면 이를 상태로 관리해야 할 것이다.

const [isLoggedIn, setIsLoggedIn] = useState(false);

 

그런데 이렇게 상태가 점점 많아지고, 여러 컴포넌트에서 함께 써야 한다면 어떻게 해야 할까?

👉 이럴 때 필요한 것이 바로 상태 관리 라이브러리이다.

 

---

😵 기존 상태 관리 라이브러리의 문제점

React를 처음 배우는 사람들은 종종 상태 관리 도구로 Redux를 접하게 되는데,

Redux는 강력한 기능을 제공하지만, 사용하기엔 아래와 같은 단점들이 있다.

• 설정해야 할 게 많다.
• 코드가 길어지고 복잡하다.
• 러닝 커브가 높아서 초보자에게는 부담이 크다.

 

그래서 등장한 것이 Zustand이다.

 

Zustand는 독일어로 '상태'라는 뜻으로,

React 3D 라이브러리인 react-three-fiber를 만든 팀 PMNDRS에서 개발했다.

 

---

🚀 핵심 특징

특징	설명
🧠 아주 심플한 API	몇 줄만으로 스토어 생성 완료
🧵 Context 필요 없음	Provider 없이도 상태 공유 가능
🐇 빠른 속도	불필요한 렌더링 최소화, 성능 최적화
🎯 타입스크립트 완벽 지원	제네릭 기반으로 추론 잘 됨
🛠 미들웨어도 가능	Persist (로컬 저장), Devtools 연동 등

 

---

🛠 설치 및 사용 방법

1️⃣ 설치

pnpm install zustand
# 또는
npm install zustand

 

2️⃣ 상태 만들기 (스토어 생성)

// store.ts
import { create } from 'zustand';

type BearState = {
  bears: number;
  increase: () => void;
};

export const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

 

3️⃣ 상태 사용하기

// App.tsx
import { useBearStore } from './store';

function App() {
  const bears = useBearStore((state) => state.bears);
  const increase = useBearStore((state) => state.increase);

  return (
    <div>
      <h1>곰의 수: {bears}</h1>
      <button onClick={increase}>곰 추가하기 🐻</button>
    </div>
  );
}

 

 

---

🤔 Zustand를 사용해야 하는 이유

항목	Redux	Zustand
코드량	많음	매우 적음
러닝커브	높음	낮음
Provider 필요 여부	⭕	❌
성능 최적화	직접 해야 함	기본적으로 최적화 잘 됨
Devtools	있음	있음

 

---

📝 결론

Zustand는 상태 관리를 가볍고 심플하게 하고 싶은 React 개발자에게 아주 좋은 선택일 것이다.

• Redux가 너무 복잡하다고 느끼는 사람 🖐🏻
• 간단한 글로벌 상태가 필요한 사람 🖐🏻
• 빠른 개발과 성능을 모두 챙기고 싶은 사람 🖐🏻

👉🏻 Zustand를 사용해보면 좋을 것 같다.