Zustand를 활용(6): Zustand 미들웨어 활용

Zustand 미들웨어 활용

미들웨어를 활용한 상태 변화와 로깅 과정

내용:

• 미들웨어를 사용한 상태 관리 확장: 상태 관리에서 미들웨어의 개념과 역할을 배우고, 이를 활용해 상태를 확장하는 방법을 학습합니다.
• 상태 변화 로깅 및 디버깅 방법: 상태가 변경될 때마다 로그를 기록하여 상태 변화를 추적하고 디버깅하는 기법을 익힙니다.

실습:

• Zustand 미들웨어를 사용하여 로깅, 퍼시스턴스 구현: Zustand 미들웨어를 통해 상태가 변경될 때마다 로그를 기록하고, 상태를 퍼시스턴스(저장)하는 기능을 구현합니다.
• 상태가 변경될 때마다 콘솔에 로깅: 상태가 변할 때마다 콘솔에 로그를 출력하여 상태 변화를 실시간으로 추적하는 방법을 실습합니다.

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

// Zustand 상태 저장소 생성
const useStore = create(
  persist(
    devtools(set => ({
      count: 0,
      increase: () => set(state => ({ count: state.count + 1 })),
      decrease: () => set(state => ({ count: state.count - 1 }))
    })),
    {
      name: 'zustand-storage', // 로컬 스토리지 키 이름
    }
  )
);

export default function Counter() {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

Zustand 미들웨어 개념

• devtools 미들웨어: 상태 관리 과정에서 상태 변화를 추적하고 디버깅할 수 있게 도와주는 도구입니다. 상태의 변경 내역을 확인할 수 있고, 상태에 대한 실시간 로깅을 지원합니다.
• persist 미들웨어: 상태를 로컬 스토리지나 세션 스토리지에 저장하고, 페이지를 새로고침해도 상태가 유지되도록 만드는 기능을 제공합니다. 이는 사용자의 상태를 지속적으로 관리할 때 유용합니다.