🍕 03. 슬라이스 패턴 (Slice Pattern): 스토어를 조립식으로 쪼개기

🎯 이 섹션을 읽고 나면:

• 비대해진 스토어를 관심사(도메인)별로 분리하는 조각(Slice) 패턴을 구현할 수 있다.
• 여러 개의 Slice를 하나로 결합하고, Slice 간에 상태를 교차 참조(통신)하는 방법을 이해한다.

📋 목차

• 🤔 왜 알아야 하는가
• 🏗️ 1. 스토어를 조각내기: Slice 생성
  • A. 일반 스토어(전통 방식)의 문제
  • B. Slice 쪼개기 (관심사 분리)
• 🧩 2. 메인 스토어에서 조립(Combine)하기
• ⚡ 3. Slice 간의 통신 (교차 참조)
• 🏋️‍♂️ 영철의 테스트 타임 (Q&A)

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 12분 / 핵심 파트: 7분

🗺️ 이 문서의 흐름
스토어 비대화 문제점 → Slice 분리 기법 → 중앙 통합 스토어(BoundStore) 결합 → Slice 간 통신

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 리드 님, 어제 말씀하신 대로 스토어 뎁스를 깊게 안 파려고 노력 중인데요. 그러다 보니까 전체 상태를 들고 있는 useAppStore.ts 파일이 500줄이 넘어갔어요! 로직 찾기도 힘들고 너무 뚱뚱한데 이거 파일 단위로 다 분리해야 할까요?"
• 🦁 영호 ( 리드 ): "영철 님, 스토어가 비대해지는 현상을 겪고 계시는군요. Zustand는 여러 개의 작은 스토어를 만들어도 되지만, 연관된 상태끼리 엮이는 구조라면 하나의 큰 스토어를 유지하되 내부를 조립식 블록처럼 쪼개서 합치는 '슬라이스 패턴(Slice Pattern)'을 적용해야 유지보수도 잡고 상태 간 통신도 편해집니다. 레고 조립법을 배워봅시다."

🤔 왜 알아야 하는가

Zustand로 앱을 구축하다 보면, 전역 상태는 필연적으로 비대해집니다. 인증/인가를 담당하는 User 도메인, 다크 모드/사이드바 여부를 기억하는 UI 도메인, 그리고 유저가 작성 중이던 임시 게시판 폼 데이터 등 역할이 전혀 다른 상태들이 한 파일에 혼재하게 되면 유지보수성은 뚝 떨어집니다.

Redux에서는 보통 combineReducers를 사용해 관심사를 분리합니다. Zustand에서는 이와 유사하지만 훨씬 직관적인 Slice(조각) 패턴을 공식으로 권장합니다.

각 기능별 조각(Slice)을 별도의 파일이나 함수로 독립시키고, 메인 스토어(useBoundStore)에서 그 조각들을 결합(Merge)하여 단일 창구(Single Source)를 제공하는 아키텍처입니다.

🏗️ 1. 스토어를 조각내기: Slice 생성

먼저 모든 것을 들고 있던 뚱뚱한 스토어를 기능(도메인)별 조각으로 분리해보겠습니다.

A. 일반 스토어(전통 방식)의 문제

// 🐣 영철: 파일 하나에 다 때려박았더니 코드가 500줄이에요...
const useStore = create((set) => ({
  user: null, // 유저 기능
  login: () => { ... },
  
  isDarkMode: false, // UI 기능
  toggleTheme: () => { ... },
  
  cartItems: [], // 장바구니 기능
  addItem: () => { ... },
}));

B. Slice 쪼개기 (관심사 분리)

각 Slice는 Zustand의 StateCreator 타입을 사용하여 독립적으로 설계합니다. 이제 유저 로직과 장바구니 로직이 서로의 시야에서 분리됩니다.

// features/user/userSlice.ts
import { StateCreator } from 'zustand';
 
export interface UserSlice {
  user: string | null;
  login: (name: string) => void;
  logout: () => void;
}
 
// 🦁 영호: 이 Slice는 자기가 User 관련된 일만 한다는 것에 집중해요.
export const createUserSlice: StateCreator<UserSlice> = (set) => ({
  user: null,
  login: (name) => set({ user: name }),
  logout: () => set({ user: null }),
});

// features/cart/cartSlice.ts
import { StateCreator } from 'zustand';
 
export interface CartSlice {
  cartItems: string[];
  addItem: (item: string) => void;
}
 
export const createCartSlice: StateCreator<CartSlice> = (set) => ({
  cartItems: [],
  addItem: (item) => set((state) => ({ cartItems: [...state.cartItems, item] })),
});

🧩 2. 메인 스토어에서 조립(Combine)하기

자, 흩어져 있는 조각들을 메인 스토어에서 하나로 뭉쳐보겠습니다. 이 메인 스토어를 보통 Bound Store(묶인 스토어)라고 부릅니다.

스프레드 연산자(...)를 이용해 각각의 Slice 생성 함수를 호출하고 결합합니다. 이때 상태 타입(인터페이스)도 하나로 합칩니다(Intersection Type).

// store/useBoundStore.ts
import { create } from 'zustand';
import { UserSlice, createUserSlice } from '../features/user/userSlice';
import { CartSlice, createCartSlice } from '../features/cart/cartSlice';
 
// 🐣 영철: 여기서 타입들을 '+' 기호처럼(&) 합치는군요!
type StoreState = UserSlice & CartSlice;
 
// 🦁 영호: set, get, api를 각각의 Slice 함수에 그대로 토스(Toss)합니다.
export const useBoundStore = create<StoreState>()((...a) => ({
  ...createUserSlice(...a),
  ...createCartSlice(...a),
}));

이렇게 하면 컴포넌트 입장에서는 단일 스토어(useBoundStore) 하나만 임포트하고, 유저 정보든 장바구니 정보든 쏙쏙 뽑아(Select)다 쓸 수 있습니다.

⚡ 3. Slice 간의 통신 (교차 참조)

하나의 큰 스토어 내에서 Slice들끼리 서로 상태를 조작해야 할 상황이 생기기도 합니다. 예를 들어, 로그아웃을 하면 장바구니도 같이 초기화되어야 한다면 어떨까요?

이때 Zustand의 강력함이 드러납니다. 각 조각(Slice)들은 get() 함수를 통해 전체 스토어(Bound Store)의 상태를 읽고 업데이트할 수 있습니다.

import { StateCreator } from 'zustand';
// 💡 교차 참조를 위해 전체 스토어 타입을 제네릭에 넣어야 해요.
import { StoreState } from '../../store/useBoundStore';
 
export const createUserSlice: StateCreator<
  StoreState,
  [], // middleware
  [],
  UserSlice
> = (set, get) => ({
  user: null,
  login: (name) => set({ user: name }),
  // 🤔 로그아웃하면 장바구니도 비우자!
  logout: () => {
    // 🦁 영호: 현재 스토어 구조상 Cart의 cartItems 필드를 직접 밀어버릴 수 있어요.
    set({ user: null, cartItems: [] });
    // 만약 CartSlice의 비우기 함수를 호출하고 싶다면:
    // get().clearCart(); 
  },
});

🌟 디자인 원칙:
Slice 간 결합도가 너무 높아지면 단일 기능으로서의 독립성이 무너집니다. 유저가 장바구니를 비우는 정도는 괜찮지만, 서로의 상태를 미로처럼 참조하게 짜지 마세요! 가급적 이벤트 중심 분리가 유지보수에 유리합니다.

📝 마무리 퀴즈

Q1. Zustand에서 비대해지는 메인 스토어를 분리할 때 사용하는 가장 흔한 패턴은 무엇인가요?

• A) 슬라이스 패턴(Slice Pattern)
• B) 컨텍스트 분리 패턴(Context Split Pattern)
• C) 글로벌 옵저버 패턴(Global Observer Pattern)
• D) 다중 스토어 결합 패턴(Multiple Store Combine Pattern)

✅ 정답: A

💡 상세 해설:

• 원리 설명: 메인 스토어의 관리 포인트가 커지는 것을 막기 위해 도메인별 관심사로 분리하고 이를 단일 Bound Store에서 결합($merge)하는 아키텍처를 슬라이스 패턴이라고 부릅니다.
• 오답 피드백: "영철 님, 여러 개의 독립적인 useStore를 무한정 찍어내는 방식은 교차 참조 통신이 어려워진다는 걸 잊으시면 안 됩니다."
• 📌 핵심 기억법: 🦁 영호: "거대해진 스토어는 피자 조각 자르듯 관심사대로 슬라이스(Slice) 쳐서 관리하세요."

Q2. Slice 간에 서로의 상태를 참조하거나 업데이트(교차 참조)해야 할 때, Zustand 슬라이스 내에서 어떻게 접근하나요?

• A) Redux의 dispatch를 사용해 액션 통신을 한다.
• B) 슬라이스를 정의할 때 주입받은 get() 함수를 이용해 전체 상태에 접근한다.
• C) 다른 슬라이스 파일을 직접 import해서 해당 객체의 속성을 변경한다.
• D) 교차 참조는 절대 불가능하므로 공통 부모 슬라이스를 새로 만들어야 한다.

✅ 정답: B

💡 상세 해설:

• 원리 설명: 슬라이스 생성 함수(StateCreator)는 묶여진 전체 스토어(Bound Store)의 타입 컨텍스트 위에서 정의됩니다. 따라서 내부의 get() 함수를 호출하면 다른 슬라이스의 상태를 읽을 수 있고, set()을 통해 수정도 가능합니다.
• 오답 피드백: "영철 님, 슬라이스를 조각냈다고 서로 소통이 끊기는 게 아니에요. 톱니바퀴들은 get이라는 축으로 연결되어 있습니다."
• 📌 핵심 기억법: 🦁 영호: "다른 부서(Slice) 서류가 필요할 때 가장 빠른 문은 get()입니다."

Q3. 🏋️‍♂️ 영철의 테스트 타임 (Q&A)

영철이가 쇼핑 앱의 스토어를 만들면서 UI 상태 관리 조각(UISlice)과 다크 모드 토글 함수, 그리고 User 도메인을 관리 중이었습니다. 스토어를 분리($useUIStore, $useUserStore)하여 여러 개의 create 함수를 만들었을 때, 특정 컴포넌트에서 로그인 정보와 다크모드 정보를 둘 다 써야 한다면 각각 따로 훅(hook)을 호출해야 합니다. 반면, 슬라이스 패턴을 사용하여 묶음 스토어(useBoundStore)를 사용하면 어떤 유지보수 지점이 편해지나요?

✅ 정답: 단일 스토어로 묶어두면 Slice 상태 간의 교차 접근 및 상호작용 로직 작성이 한 곳에서 가능해지며, 렌더링 최적화를 위한 플러그인 등 확장이 수월해진다.

💡 상세 해설:

• 원리 설명: 여러 개의 create 스토어를 만들면, "로그아웃 시 다크 모드를 초기화한다" 같은 로직을 컴포넌트 내에 useEffect로 덕지덕지 묶거나 스토어 외부 파일에서 개입해야 하는 끔찍한 파편화가 발생하게 됩니다. 모듈화의 장점을 거두되, 데이터를 지배하는 중앙 센터는 BoundStore로 묶어서 상태 간의 통신과 관리 포인트를 깔끔하게 남겨두어야 합니다.
• 오답 피드백: "영철 님, 스토어를 조각냈다고 완전히 남남이 된 게 아니에요. StateCreator를 이용해 느슨하게 결합해주면, set과 get 메커니즘을 동일선상에서 사용하여 언제든 장바구니를 건들 수 있답니다."
• 📌 핵심 기억법: 🦁 영호: "작은 톱니바퀴 여러 개를 만드는 데 그치면 각자 따로 놉니다. 톱니를 나눠 깎더라도 하나의 시계판(Bound Store) 위에 올려야 정확한 시너지를 내는 법이죠."

🐣 영철이의 퇴근 일기

와. 오늘 useBoundStore.ts 만드는데, 그동안 스크롤 압박이 쩔었던 코드가 마법같이 분리되었다! 심지어 logout 함수에서 cartItems까지 지워버리니까 비즈니스 로직들이 스크토어 안에서 예쁘게 소통하는 기분이 들었다. 역시 영호 리드 님이 짜는 아키텍처는 뭔가 달라도 다름! 내일은 퇴근하고 모처럼 치맥 한 잔 시원하게 걸치며, 새로 리팩토링한 코드를 흐뭇하게 감상해봐야겠다 🍗🍺!

💡 "상태를 조각(Slice)처럼 잘라 나누고, 메인 스토어라는 하나의 레고판에 끼워 맞추자."