Zustand 디버깅 : DevTools

Zustand DevTools 적용

정의

• Zustand에서 제공하는 devtools 미들웨어를 사용하여 브라우저의 Redux DevTools 확장 프로그램을 통해 상태를 추적하는 방식
• 상태의 변화를 시각적으로 확인하고, 과거 상태로 되돌아가는 타임 트래블(Time Travel) 기능을 지원한다.

특징

• Redux DevTools 호환
  • 별도의 도구 설치 없이 기존의 Redux DevTools 브라우저 확장 프로그램을 그대로 사용할 수 있다.
• 미들웨어 방식
  • 스토어 생성 시 devtools 함수로 감싸기만 하면 간단하게 적용 가능하다.
• 멀티 스토어 지원
  • 여러 개의 스토어를 사용할 경우 각각 이름을 지정하여 개별적으로 모니터링할 수 있다.

장점

• 복잡한 상태 변화를 타임라인으로 한눈에 파악할 수 있어 버그 추적이 쉽다.
• 특정 액션이 발생했을 때 어떤 데이터가 변경되었는지 직관적으로 확인할 수 있다.
• 개발 환경에서만 활성화되도록 설정하여 프로덕션 성능에 영향을 주지 않는다.

단점

• 상태 객체가 매우 크고 변화가 잦을 경우 브라우저 성능에 부하를 줄 수 있다.
• 미들웨어를 추가함에 따라 스토어 정의 코드가 약간 더 복잡해질 수 있다.

사용 방법

devtools 미들웨어 적용

스토어를 생성할 때 devtools로 감싸주고, 필요에 따라 스토어 이름을 옵션으로 전달한다.

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

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

const useCounterStore = create<CounterState>()(
  devtools(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 }), false, 'counter/increase'),
    }),
    { name: 'CounterStore' } // DevTools에서 식별할 이름
  )
);

액션 이름 지정

set 함수의 세 번째 인자로 액션 이름을 문자열로 전달하면, DevTools의 액션 목록에 해당 이름이 표시되어 더욱 명확한 디버깅이 가능하다.

// 세 번째 인자로 액션 명칭 명시
increase: () => set((state) => ({ count: state.count + 1 }), false, 'counter/increase'),

주요 기능 활용

State Inspector

• 현재 스토어에 담긴 모든 데이터의 값을 트리 구조로 확인할 수 있다.
• 직접 값을 수정하여 화면에 즉시 반영되는지 테스트 가능하다.

Action History

• 발생한 모든 액션의 기록이 누적된다.
• 특정 액션 시점의 상태(Diff)만 골라서 볼 수 있어 원인 파악이 빠르다.

Time Travel

• 과거의 특정 상태로 ‘Jump’ 하거나 ‘Skip’ 하여 애플리케이션의 동작을 재현할 수 있다.
• 복잡한 사용자 시나리오를 반복해서 테스트할 때 유용하다.