Persist 미들웨어로 상태 유지하기

환영합니다

상태를 저장해야 하는 이유

persist 미들웨어

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

const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
    }),
    { name: 'cart-storage' } // localStorage key
  )
);

partialize를 사용한 부분 저장

persist(
  (set) => ({ user: null, token: null, loading: false, fetch: () => {} }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ user: state.user, token: state.token }),
    // loading and fetch are NOT persisted
  }
)

sessionStorage 사용하기

import { createJSONStorage } from 'zustand/middleware';

persist(storeCreator, {
  name: 'session-data',
  storage: createJSONStorage(() => sessionStorage),
})

버전 관리 및 마이그레이션

persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

하이드레이션 및 SSR

onRehydrateStorage 콜백

persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

저장된 상태 삭제

const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

저장소 크기 제한

간단한 확인

복습

다음 학습 내용