🐻 Zustand 완벽 가이드 (React 상태 관리의 새로운 표준)

14 Nov 2025

Zustand란 무엇인가

학교 사물함을 생각해보자.
각 학생이 자기 사물함에 물건을 넣고 빼듯이,
Zustand는 앱의 데이터를 저장하고 꺼내는 사물함이다.

Redux는 거대한 창고 같다.
물건 하나 넣으려면 서류 작성하고, 승인받고, 기록해야 한다.

Zustand는 개인 사물함 같다.
열쇠만 있으면 바로 넣고 뺄 수 있다.
간단하고, 빠르고, 편하다.

왜 Zustand를 배워야 할까?

이유 1: 간단함
Redux 대비 80% 적은 코드

이유 2: 빠른 성능
필요한 컴포넌트만 리렌더링

이유 3: TypeScript 친화적
타입 추론이 자동으로 동작

이유 4: 번들 크기
단 1KB (gzipped)

기본 개념 요약

🏷️ 상태 관리 라이브러리 비교

구분	Redux	Zustand	Recoil	Jotai
보일러플레이트	많음	적음	중간	적음
번들 크기	7KB	1KB	20KB	3KB
학습 곡선	높음	낮음	중간	낮음
DevTools	지원	지원	지원	지원
미들웨어	필수	선택	없음	없음
React 외부 사용	가능	가능	불가	불가

🏷️ Zustand 핵심 개념

Store (저장소)

개념: 상태와 액션을 담는 컨테이너

// 사물함 = Store
// 사물함 안의 물건 = State
// 물건 넣기/빼기 = Actions

State (상태)

개념: 저장된 데이터

예시:

로그인한 사용자 정보
장바구니 상품 목록
다크모드 설정

Actions (액션)

개념: 상태를 변경하는 함수

예시:

로그인/로그아웃
상품 추가/삭제
테마 변경

🏷️ Zustand vs Redux 코드 비교

Redux 방식 (복잡함)

// 1. Action Types
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

// 2. Action Creators
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// 3. Reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// 4. Store
const store = createStore(counterReducer);

// 5. Component (connect 또는 useSelector/useDispatch)
const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
};

Zustand 방식 (간단함)

// 1. Store (상태 + 액션 한 번에)
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// 2. Component
const Counter = () => {
  const { count, increment } = useCounterStore();

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

실전 예시

🏷️ 설치 및 기본 설정

# 설치
npm install zustand

# TypeScript 프로젝트
npm install zustand

🏷️ 기본 Store 생성

// src/stores/counter-store.ts
import { create } from "zustand";

// 타입 정의
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
  setCount: (value: number) => void;
}

// Store 생성
export const useCounterStore = create<CounterState>((set) => ({
  // 상태
  count: 0,

  // 액션
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
  setCount: (value) => set({ count: value }),
}));

// src/components/Counter.tsx
import { useCounterStore } from "../stores/counter-store";

export const Counter = () => {
  // 필요한 상태와 액션만 선택
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const reset = useCounterStore((state) => state.reset);

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
};

🏷️ 실전: 장바구니 Store

// src/types/cart.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

export interface CartItem extends Product {
  quantity: number;
}

// src/stores/cart-store.ts
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { CartItem, Product } from "../types/cart";

interface CartState {
  // 상태
  items: CartItem[];

  // 계산된 값 (Getter)
  totalItems: () => number;
  totalPrice: () => number;

  // 액션
  addItem: (product: Product) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],

      // 총 상품 수
      totalItems: () => {
        return get().items.reduce((sum, item) => sum + item.quantity, 0);
      },

      // 총 가격
      totalPrice: () => {
        return get().items.reduce(
          (sum, item) => sum + item.price * item.quantity,
          0
        );
      },

      // 상품 추가
      addItem: (product) => {
        set((state) => {
          const existingItem = state.items.find(
            (item) => item.id === product.id
          );

          if (existingItem) {
            // 이미 있으면 수량 증가
            return {
              items: state.items.map((item) =>
                item.id === product.id
                  ? { ...item, quantity: item.quantity + 1 }
                  : item
              ),
            };
          }

          // 없으면 새로 추가
          return {
            items: [...state.items, { ...product, quantity: 1 }],
          };
        });
      },

      // 상품 제거
      removeItem: (productId) => {
        set((state) => ({
          items: state.items.filter((item) => item.id !== productId),
        }));
      },

      // 수량 변경
      updateQuantity: (productId, quantity) => {
        set((state) => ({
          items: state.items.map((item) =>
            item.id === productId ? { ...item, quantity } : item
          ),
        }));
      },

      // 장바구니 비우기
      clearCart: () => set({ items: [] }),
    }),
    {
      name: "cart-storage", // localStorage 키
    }
  )
);

// src/components/Cart.tsx
import { useCartStore } from "../stores/cart-store";

export const Cart = () => {
  const items = useCartStore((state) => state.items);
  const totalItems = useCartStore((state) => state.totalItems);
  const totalPrice = useCartStore((state) => state.totalPrice);
  const removeItem = useCartStore((state) => state.removeItem);
  const updateQuantity = useCartStore((state) => state.updateQuantity);
  const clearCart = useCartStore((state) => state.clearCart);

  return (
    <div className="cart">
      <h2>장바구니 ({totalItems()}개)</h2>

      {items.length === 0 ? (
        <p>장바구니가 비어있습니다.</p>
      ) : (
        <>
          <ul>
            {items.map((item) => (
              <li key={item.id}>
                <img src={item.image} alt={item.name} />
                <span>{item.name}</span>
                <span>{item.price.toLocaleString()}원</span>
                <input
                  type="number"
                  min="1"
                  value={item.quantity}
                  onChange={(e) =>
                    updateQuantity(item.id, parseInt(e.target.value))
                  }
                />
                <button onClick={() => removeItem(item.id)}>삭제</button>
              </li>
            ))}
          </ul>

          <div className="cart-summary">
            <p>총 금액: {totalPrice().toLocaleString()}원</p>
            <button onClick={clearCart}>장바구니 비우기</button>
            <button>결제하기</button>
          </div>
        </>
      )}
    </div>
  );
};

// src/components/ProductCard.tsx
import { useCartStore } from "../stores/cart-store";
import { Product } from "../types/cart";

interface ProductCardProps {
  product: Product;
}

export const ProductCard = ({ product }: ProductCardProps) => {
  const addItem = useCartStore((state) => state.addItem);

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price.toLocaleString()}원</p>
      <button onClick={() => addItem(product)}>장바구니 담기</button>
    </div>
  );
};

🏷️ 실전: 인증 Store

// src/types/auth.ts
export interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
}

export interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

// src/stores/auth-store.ts
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";
import { User } from "../types/auth";

interface AuthState {
  // 상태
  user: User | null;
  token: string | null;
  isLoading: boolean;
  error: string | null;

  // 계산된 값
  isAuthenticated: () => boolean;

  // 액션
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  updateProfile: (data: Partial<User>) => void;
  clearError: () => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      isLoading: false,
      error: null,

      isAuthenticated: () => !!get().token,

      login: async (email, password) => {
        set({ isLoading: true, error: null });

        try {
          // API 호출
          const response = await fetch("/api/auth/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ email, password }),
          });

          if (!response.ok) {
            throw new Error("로그인에 실패했습니다.");
          }

          const data = await response.json();

          set({
            user: data.user,
            token: data.token,
            isLoading: false,
          });
        } catch (error) {
          set({
            error: error instanceof Error ? error.message : "오류 발생",
            isLoading: false,
          });
        }
      },

      logout: () => {
        set({
          user: null,
          token: null,
          error: null,
        });
      },

      updateProfile: (data) => {
        set((state) => ({
          user: state.user ? { ...state.user, ...data } : null,
        }));
      },

      clearError: () => set({ error: null }),
    }),
    {
      name: "auth-storage",
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({
        user: state.user,
        token: state.token,
      }),
    }
  )
);

// src/components/LoginForm.tsx
import { useState } from "react";
import { useAuthStore } from "../stores/auth-store";

export const LoginForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const login = useAuthStore((state) => state.login);
  const isLoading = useAuthStore((state) => state.isLoading);
  const error = useAuthStore((state) => state.error);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await login(email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}

      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="이메일"
        disabled={isLoading}
      />

      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="비밀번호"
        disabled={isLoading}
      />

      <button type="submit" disabled={isLoading}>
        {isLoading ? "로그인 중..." : "로그인"}
      </button>
    </form>
  );
};

// src/components/Header.tsx
import { useAuthStore } from "../stores/auth-store";

export const Header = () => {
  const user = useAuthStore((state) => state.user);
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const logout = useAuthStore((state) => state.logout);

  return (
    <header>
      <nav>
        {isAuthenticated() ? (
          <>
            <span>안녕하세요, {user?.name}님</span>
            <button onClick={logout}>로그아웃</button>
          </>
        ) : (
          <a href="/login">로그인</a>
        )}
      </nav>
    </header>
  );
};

🏷️ 미들웨어 활용

DevTools 연동

// src/stores/counter-store.ts
import { create } from "zustand";
import { devtools } from "zustand/middleware";

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

export const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increment: () =>
        set(
          (state) => ({ count: state.count + 1 }),
          false,
          "increment" // 액션 이름 (DevTools에 표시)
        ),
    }),
    { name: "CounterStore" } // Store 이름
  )
);

여러 미들웨어 조합

// src/stores/app-store.ts
import { create } from "zustand";
import { devtools, persist, subscribeWithSelector } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

interface AppState {
  theme: "light" | "dark";
  language: "ko" | "en";
  notifications: boolean;
  setTheme: (theme: "light" | "dark") => void;
  setLanguage: (lang: "ko" | "en") => void;
  toggleNotifications: () => void;
}

export const useAppStore = create<AppState>()(
  devtools(
    persist(
      subscribeWithSelector(
        immer((set) => ({
          theme: "light",
          language: "ko",
          notifications: true,

          setTheme: (theme) =>
            set((state) => {
              state.theme = theme;
            }),

          setLanguage: (lang) =>
            set((state) => {
              state.language = lang;
            }),

          toggleNotifications: () =>
            set((state) => {
              state.notifications = !state.notifications;
            }),
        }))
      ),
      { name: "app-settings" }
    ),
    { name: "AppStore" }
  )
);

// 상태 변화 구독
useAppStore.subscribe(
  (state) => state.theme,
  (theme) => {
    document.documentElement.setAttribute("data-theme", theme);
  }
);

🏷️ 슬라이스 패턴 (대규모 앱)

슬라이스 패턴이란?

피자를 생각해보자.
피자 한 판을 여러 조각으로 나누듯이,
하나의 큰 Store를 여러 개의 작은 조각(Slice)으로 나누는 패턴이다.

왜 슬라이스 패턴을 사용할까?

문제점: 하나의 거대한 Store

// ❌ 나쁜 예: 모든 상태가 한 파일에
const useStore = create((set) => ({
  // 사용자 관련
  user: null,
  setUser: () => {},
  logout: () => {},

  // 장바구니 관련
  items: [],
  addToCart: () => {},
  removeFromCart: () => {},

  // UI 관련
  isSidebarOpen: false,
  isModalOpen: false,
  toggleSidebar: () => {},

  // 설정 관련
  theme: "light",
  language: "ko",
  setTheme: () => {},

  // ... 수백 줄의 코드
}));

해결책: 슬라이스로 분리

src/stores/
├── index.ts              # 모든 슬라이스 합치기
├── slices/
│   ├── user-slice.ts     # 사용자 관련
│   ├── cart-slice.ts     # 장바구니 관련
│   ├── ui-slice.ts       # UI 관련
│   └── settings-slice.ts # 설정 관련
└── types/
    └── store.ts          # 타입 정의

슬라이스 패턴의 장점:

장점	설명
관심사 분리	기능별로 코드 분리
유지보수	수정할 파일 찾기 쉬움
협업	팀원별로 다른 슬라이스 담당
테스트	슬라이스별 독립 테스트
재사용	다른 프로젝트에서 슬라이스 재사용

기본 슬라이스 구현

// src/stores/slices/user-slice.ts
import { StateCreator } from "zustand";

export interface UserSlice {
  user: { id: string; name: string } | null;
  setUser: (user: { id: string; name: string } | null) => void;
}

export const createUserSlice: StateCreator<UserSlice> = (set) => ({
  user: null,
  setUser: (user) => set({ user }),
});

// src/stores/slices/cart-slice.ts
import { StateCreator } from "zustand";

export interface CartSlice {
  items: Array<{ id: string; quantity: number }>;
  addToCart: (id: string) => void;
  removeFromCart: (id: string) => void;
}

export const createCartSlice: StateCreator<CartSlice> = (set) => ({
  items: [],
  addToCart: (id) =>
    set((state) => ({
      items: [...state.items, { id, quantity: 1 }],
    })),
  removeFromCart: (id) =>
    set((state) => ({
      items: state.items.filter((item) => item.id !== id),
    })),
});

// src/stores/slices/ui-slice.ts
import { StateCreator } from "zustand";

export interface UISlice {
  isSidebarOpen: boolean;
  isModalOpen: boolean;
  toggleSidebar: () => void;
  openModal: () => void;
  closeModal: () => void;
}

export const createUISlice: StateCreator<UISlice> = (set) => ({
  isSidebarOpen: false,
  isModalOpen: false,
  toggleSidebar: () =>
    set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
  openModal: () => set({ isModalOpen: true }),
  closeModal: () => set({ isModalOpen: false }),
});

// src/stores/index.ts
import { create } from "zustand";
import { devtools } from "zustand/middleware";
import { UserSlice, createUserSlice } from "./slices/user-slice";
import { CartSlice, createCartSlice } from "./slices/cart-slice";
import { UISlice, createUISlice } from "./slices/ui-slice";

// 모든 슬라이스 합치기
type StoreState = UserSlice & CartSlice & UISlice;

export const useStore = create<StoreState>()(
  devtools((...args) => ({
    ...createUserSlice(...args),
    ...createCartSlice(...args),
    ...createUISlice(...args),
  }))
);

슬라이스 간 상태 공유

슬라이스끼리 서로의 상태에 접근해야 할 때가 있다.
예: 장바구니에서 로그인 여부 확인

// src/stores/types/store.ts
// 전체 Store 타입 정의
import { UserSlice } from "../slices/user-slice";
import { CartSlice } from "../slices/cart-slice";

export type StoreState = UserSlice & CartSlice;

// src/stores/slices/cart-slice.ts
import { StateCreator } from "zustand";
import { StoreState } from "../types/store";

export interface CartSlice {
  items: Array<{ id: string; quantity: number }>;
  addToCart: (id: string) => void;
  checkout: () => Promise<void>;
}

// 두 번째 제네릭으로 전체 Store 타입 전달
export const createCartSlice: StateCreator<
  StoreState, // 전체 Store 타입
  [],
  [],
  CartSlice // 이 슬라이스 타입
> = (set, get) => ({
  items: [],

  addToCart: (id) => {
    // 다른 슬라이스(UserSlice)의 상태 접근
    const user = get().user;

    if (!user) {
      alert("로그인이 필요합니다!");
      return;
    }

    set((state) => ({
      items: [...state.items, { id, quantity: 1 }],
    }));
  },

  checkout: async () => {
    const user = get().user;
    const items = get().items;

    if (!user) {
      throw new Error("로그인이 필요합니다.");
    }

    // 결제 API 호출
    await fetch("/api/checkout", {
      method: "POST",
      body: JSON.stringify({ userId: user.id, items }),
    });

    // 장바구니 비우기
    set({ items: [] });
  },
});

슬라이스 + 미들웨어 조합

// src/stores/index.ts
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { UserSlice, createUserSlice } from "./slices/user-slice";
import { CartSlice, createCartSlice } from "./slices/cart-slice";
import { UISlice, createUISlice } from "./slices/ui-slice";

type StoreState = UserSlice & CartSlice & UISlice;

export const useStore = create<StoreState>()(
  devtools(
    persist(
      (...args) => ({
        ...createUserSlice(...args),
        ...createCartSlice(...args),
        ...createUISlice(...args),
      }),
      {
        name: "app-storage",
        // 특정 슬라이스만 저장
        partialize: (state) => ({
          user: state.user,
          items: state.items,
          // UI 상태는 저장 안 함
        }),
      }
    ),
    { name: "AppStore" }
  )
);

컴포넌트에서 사용

// src/components/Header.tsx
import { useStore } from "../stores";

export const Header = () => {
  // 필요한 상태만 선택 (성능 최적화)
  const user = useStore((state) => state.user);
  const itemCount = useStore((state) => state.items.length);
  const toggleSidebar = useStore((state) => state.toggleSidebar);

  return (
    <header>
      <button onClick={toggleSidebar}>메뉴</button>
      <span>장바구니 ({itemCount})</span>
      {user ? <span>{user.name}님</span> : <a href="/login">로그인</a>}
    </header>
  );
};

// src/components/Cart.tsx
import { useStore } from "../stores";
import { shallow } from "zustand/shallow";

export const Cart = () => {
  // 여러 상태를 한 번에 선택 (shallow 비교)
  const { items, addToCart, checkout } = useStore(
    (state) => ({
      items: state.items,
      addToCart: state.addToCart,
      checkout: state.checkout,
    }),
    shallow
  );

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          상품 ID: {item.id}, 수량: {item.quantity}
        </div>
      ))}
      <button onClick={checkout}>결제하기</button>
    </div>
  );
};

슬라이스 패턴 Best Practices

규칙	설명
단일 책임	하나의 슬라이스는 하나의 기능만
타입 분리	타입은 별도 파일에 정의
네이밍	`create[기능]Slice` 형식
의존성 최소화	슬라이스 간 의존성 줄이기
선택자 사용	필요한 상태만 구독

🏷️ React 외부에서 사용

// src/stores/counter-store.ts
import { create } from "zustand";

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

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

// React 외부에서 상태 접근
const count = useCounterStore.getState().count;

// React 외부에서 액션 호출
useCounterStore.getState().increment();

// 상태 변화 구독
const unsubscribe = useCounterStore.subscribe((state) => {
  console.log("상태 변경:", state.count);
});

// 구독 해제
unsubscribe();

// src/utils/api.ts
import { useAuthStore } from "../stores/auth-store";

// API 인터셉터에서 토큰 사용
export const apiClient = {
  fetch: async (url: string, options: RequestInit = {}) => {
    const token = useAuthStore.getState().token;

    const response = await fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        Authorization: token ? `Bearer ${token}` : "",
      },
    });

    // 401 에러 시 자동 로그아웃
    if (response.status === 401) {
      useAuthStore.getState().logout();
    }

    return response;
  },
};

실전 체크리스트

✅ Store 설계

관련 상태끼리 그룹화
타입 정의 명확히
액션 이름 직관적으로
불필요한 상태 최소화

✅ 성능 최적화

선택자(selector) 사용
필요한 상태만 구독
큰 객체는 분리
메모이제이션 활용

✅ 미들웨어

persist로 영속성 관리
devtools로 디버깅
immer로 불변성 관리
subscribeWithSelector로 구독

✅ 구조화

슬라이스 패턴 적용
타입 파일 분리
Store 파일 분리
테스트 작성

요약

Zustand는 간단하고 강력한 React 상태 관리 라이브러리다.

💎 핵심 포인트:

create: Store 생성
set: 상태 변경
get: 현재 상태 조회
selector: 필요한 상태만 구독
persist: localStorage 저장
devtools: Redux DevTools 연동

📌 언제 Zustand를 사용할까?:

상황	권장
간단한 전역 상태	Zustand ✅
복잡한 비동기 로직	Zustand + React Query
서버 상태 관리	React Query / SWR
폼 상태	React Hook Form
대규모 앱	Zustand (슬라이스 패턴)

🚀 Best Practices:

선택자로 필요한 상태만 구독
관련 상태는 하나의 Store에
persist로 새로고침 대응
devtools로 디버깅
TypeScript 타입 정의 필수
슬라이스 패턴으로 확장

Zustand를 사용하면,
Redux의 복잡함 없이
강력한 상태 관리를 구현할 수 있다.