[zustand] 미들웨어(middleWare) 역할과 종류

Zustand에서 미들웨어의 역할

Zustand에서 미들웨어(middleware)는 상태(store)를 확장하고, 상태 변경을 감지하거나 조작할 수 있도록 도와주는 기능을 한다. Redux의 미들웨어처럼 특정 로직(로깅, 비동기 처리, 상태 지속화 등)을 중앙에서 제어할 수 있다.

 

주요 미들웨어 기능

1. logger – 상태 변경 로그 출력

• 상태가 변경될 때마다 이전 상태와 다음 상태를 콘솔에 출력하여 디버깅에 도움을 줌.

import { create } from "zustand";
import { devtools, logger } from "zustand/middleware";

const useStore = create(
  logger(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    })
  )
);

---

2. devtools – Redux DevTools 지원

• Redux DevTools와 연결하여 상태 변경을 시각적으로 확인 가능.

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const useStore = create(
  devtools((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }))
);

---

3. persist – 상태를 로컬스토리지에 저장

• 브라우저를 새로고침해도 Zustand 상태를 유지할 수 있음.

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const useStore = create(
  devtools((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }))
);

---

4. combine – 상태 구조화

• 여러 상태를 하나로 결합할 때 사용.
  • action과 state를 분리해서 관리할 때 효율적

import { create } from "zustand";
import { combine } from "zustand/middleware";

const useStore = create(
  combine(
    { count: 0 },
    (set) => ({
      increase: () => set((state) => ({ count: state.count + 1 })),
    })
  )
);

 

---

5. immer – 불변성 유지

• 상태를 불변성(Immutability) 있게 관리할 수 있도록 도와줌.

import { create } from "zustand";
import { immer } from "zustand/middleware";

const useStore = create(
  immer((set) => ({
    todos: [],
    addTodo: (text) =>
      set((state) => {
        state.todos.push({ text, done: false });
      }),
  }))
);

 

---

6. subscribeWithSelector – 특정 상태만 감지

• Zustand의 subscribeWithSelector 미들웨어를 사용하면 더 정교하게 상태 변화를 감지할 수 있음.

import { create } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";

// ✅ 스토어 생성
const useStore = create(
  subscribeWithSelector((set) => ({
    count: 0,
    name: "Alice",
    increase: () => set((state) => ({ count: state.count + 1 })),
  }))
);

// ✅ count 값이 변경될 때만 감지
const unsubscribe = useStore.subscribe(
  (state) => state.count, // count만 감지
  (count) => {
    console.log("📢 count 변경됨:", count);
  }
);

useStore.getState().increase(); // "📢 count 변경됨: 1" 출력
useStore.getState().increase(); // "📢 count 변경됨: 2" 출력

결론

Zustand의 미들웨어는 상태 관리의 가독성, 유지보수성, 디버깅 효율성을 높이는 역할을 한다.

• 디버깅 → logger, devtools
• 데이터 저장 → persist
• 불변성 관리 → immer
• 구조화 → combine
• 특정 상태 변경 감지 코드 → subscribeWithSelector