Zustand를 활용(9): 상태 지속성 관리 (Persist)

상태 지속성 관리 (Persist)

로컬 스토리지에 상태를 저장하고 복구하는 과정

내용:

• Zustand로 상태를 로컬 스토리지에 저장하고 복구하는 방법: Zustand는 상태를 저장할 수 있으며, Persist 미들웨어를 사용하여 상태를 로컬 스토리지에 저장하고 애플리케이션을 새로고침하거나 종료 후 다시 시작할 때도 상태를 복구할 수 있습니다.
• Persist 미들웨어 사용법: 상태를 로컬 스토리지에 저장하는 Persist 미들웨어의 설정 및 활용 방법을 배웁니다.

실습:

1. 상태를 로컬 스토리지에 저장하고 복원하는 예제:
   • Zustand의 persist 미들웨어를 사용하여 상태를 로컬 스토리지에 저장.
   • 애플리케이션을 새로고침한 후에도 상태를 복구하는 과정 구현.

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

// Zustand store with persist middleware
const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      reset: () => set({ count: 0 }),
    }),
    {
      name: 'counter-storage', // unique name for localStorage key
    }
  )
);

function Counter() {
  const { count, increase, reset } = useStore();
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default Counter;

 

강의 설명:

• persist 미들웨어를 사용하여 상태를 로컬 스토리지에 저장하는 방법을 배웁니다.
• 애플리케이션을 새로고침하거나 닫은 후에도 저장된 상태를 복원하여 연속적인 사용자 경험을 제공합니다.