Zustand 슬라이스 패턴: 대규모 스토어를 도메인별로 분리하고 TypeScript로 타입 안전하게 연결하기

StateCreator<
  TStore,      // 전체 스토어 타입 — 크로스 슬라이스 접근의 열쇠
  TMutators,   // 미들웨어 체인 정보 (보통 [] 또는 [['zustand/immer', never], never])
  [],
  TSlice       // 이 슬라이스가 실제로 제공하는 타입
>

import { StateCreator } from 'zustand';
 
type AuthSlice = {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
};
 
// StateCreator<전체스토어타입, 뮤테이터, [], 이슬라이스타입>
const createAuthSlice: StateCreator<
  AuthSlice & CartSlice,  // 첫 번째 인자: 전체 스토어 타입
  [],
  [],
  AuthSlice               // 네 번째 인자: 이 슬라이스가 제공하는 타입
> = (set, get) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => {
    set({ user: null });
    get().clearCart(); // CartSlice 액션을 타입 안전하게 호출
  },
});

// 한 방향 의존성 예시: AuthSlice → CartSlice, NotificationSlice
const createAuthSlice: StateCreator<BoundStore, [], [], AuthSlice> =
  (set, get) => ({
    user: null,
    logout: () => {
      set({ user: null });
      get().clearCart();                     // CartSlice 액션
      get().addNotification('로그아웃됨');  // NotificationSlice 액션
    },
  });

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
 
type BoundStore = AuthSlice & CartSlice & UISlice & NotificationSlice;
 
const useBoundStore = create<BoundStore>()(
  devtools(
    persist(
      (...a) => ({
        ...createAuthSlice(...a),
        ...createCartSlice(...a),
        ...createUISlice(...a),
        ...createNotificationSlice(...a),
      }),
      { name: 'app-store' }
    )
  )
);

src/stores/
├── slices/
│   ├── auth.slice.ts
│   ├── cart.slice.ts
│   └── notification.slice.ts
├── types.ts          ← BoundStore 타입 정의
└── store.ts          ← 슬라이스 조합 + 미들웨어

// types.ts
export type User = {
  id: string;
  name: string;
  email: string;
};
 
export type CartItem = {
  id: string;
  name: string;
  price: number;
  quantity: number;
};
 
export type AuthSlice = {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
};
 
export type CartSlice = {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
  checkout: () => Promise<void>;
};
 
export type NotificationSlice = {
  notifications: string[];
  addNotification: (message: string) => void;
  clearNotifications: () => void;
};
 
// 이 타입을 각 슬라이스의 첫 번째 제네릭 인자로 사용
export type BoundStore = AuthSlice & CartSlice & NotificationSlice;

// slices/auth.slice.ts
import { StateCreator } from 'zustand';
import { AuthSlice, BoundStore, User } from '../types';
 
export const createAuthSlice: StateCreator<BoundStore, [], [], AuthSlice> =
  (set, get) => ({
    user: null,
 
    login: (user: User) => {
      set({ user });
      get().addNotification(`${user.name}님, 환영합니다!`);
    },
 
    logout: () => {
      const { user } = get();
      set({ user: null });
      get().clearCart();
      get().clearNotifications();
      get().addNotification(`${user?.name ?? ''}님이 로그아웃했습니다`);
    },
  });

// slices/cart.slice.ts
import { StateCreator } from 'zustand';
import { BoundStore, CartItem, CartSlice } from '../types';
 
export const createCartSlice: StateCreator<BoundStore, [], [], CartSlice> =
  (set, get) => ({
    items: [],
 
    addItem: (item: CartItem) => {
      set((state) => ({
        items: [...state.items, item],
      }));
      get().addNotification(`${item.name}이(가) 장바구니에 추가됐습니다`);
    },
 
    removeItem: (id: string) => {
      set((state) => ({
        items: state.items.filter((item) => item.id !== id),
      }));
    },
 
    clearCart: () => set({ items: [] }),
 
    // 실제 API 호출이 있으므로 async 시그니처 사용
    checkout: async () => {
      const { user, items } = get();
 
      if (!user) {
        get().addNotification('로그인이 필요합니다');
        return;
      }
 
      if (items.length === 0) {
        get().addNotification('장바구니가 비어있습니다');
        return;
      }
 
      // await paymentApi.checkout({ userId: user.id, items });
      get().clearCart();
      get().addNotification('주문이 완료됐습니다!');
    },
  });

// slices/notification.slice.ts
import { StateCreator } from 'zustand';
import { BoundStore, NotificationSlice } from '../types';
 
export const createNotificationSlice: StateCreator<
  BoundStore,
  [],
  [],
  NotificationSlice
> = (set) => ({
  notifications: [],
 
  addNotification: (message: string) => {
    set((state) => ({
      notifications: [...state.notifications, message],
    }));
  },
 
  clearNotifications: () => set({ notifications: [] }),
});

// store.ts
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { BoundStore } from './types';
import { createAuthSlice } from './slices/auth.slice';
import { createCartSlice } from './slices/cart.slice';
import { createNotificationSlice } from './slices/notification.slice';
 
export const useBoundStore = create<BoundStore>()(
  devtools(
    persist(
      (...a) => ({
        ...createAuthSlice(...a),
        ...createCartSlice(...a),
        ...createNotificationSlice(...a),
      }),
      {
        name: 'app-store',
        // 민감한 사용자 정보는 persist에서 제외
        partialize: (state) => ({
          items: state.items, // 장바구니만 유지
        }),
      }
    ),
    { name: 'AppStore' }
  )
);

import { useShallow } from 'zustand/react/shallow';
import { useBoundStore } from '../stores/store';
 
// ❌ 셀렉터가 매번 새 객체를 반환하므로 항상 리렌더링
// (items는 CartSlice, user는 AuthSlice에서 옴)
function CartBadge() {
  const { items, user } = useBoundStore((state) => ({
    items: state.items,  // CartSlice
    user: state.user,    // AuthSlice
  }));
  // ...
}
 
// ✅ useShallow로 감싸면 items 또는 user가 실제로 변경될 때만 리렌더링
function CartBadge() {
  const { items, user } = useBoundStore(
    useShallow((state) => ({
      items: state.items,  // CartSlice
      user: state.user,    // AuthSlice
    }))
  );
 
  return (
    <div>
      {user && <span>{user.name}</span>}
      <span>장바구니 {items.length}개</span>
    </div>
  );
}

import { StateCreator } from 'zustand';
 
// Immer + 슬라이스 조합을 위한 타입 헬퍼
type ImmerStateCreator<TStore, TSlice> = StateCreator<
  TStore,
  [['zustand/immer', never], never],
  [],
  TSlice
>;
 
// 사용 예시 — 긴 타입 선언 없이 재사용 가능
export const createCartSlice: ImmerStateCreator<BoundStore, CartSlice> =
  (set, get) => ({
    items: [],
    addItem: (item) => {
      set((state) => {
        // Immer draft로 직접 변경 가능
        state.items.push(item);
      });
      get().addNotification(`${item.name}이(가) 장바구니에 추가됐습니다`);
    },
    // ...
  });

// store.test.ts
import { create } from 'zustand';
import { BoundStore } from './types';
import { createAuthSlice } from './slices/auth.slice';
import { createCartSlice } from './slices/cart.slice';
import { createNotificationSlice } from './slices/notification.slice';
 
const createTestStore = () =>
  create<BoundStore>()((...a) => ({
    ...createAuthSlice(...a),
    ...createCartSlice(...a),
    ...createNotificationSlice(...a),
  }));
 
test('로그아웃 시 장바구니가 비워진다', () => {
  const useStore = createTestStore();
 
  useStore.getState().login({ id: '1', name: '김개발', email: 'test@test.com' });
  useStore.getState().addItem({ id: 'a', name: '상품A', price: 1000, quantity: 1 });
  useStore.getState().logout();
 
  expect(useStore.getState().items).toHaveLength(0);
  expect(useStore.getState().user).toBeNull();
});