localStorage 사용

기본 설정 방법

Zustand에서 persist 미들웨어를 사용하면 상태를 localStorage 등에 아주 간단하게 저장할 수 있다.

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

interface UserState {
  isLoggedIn: boolean;
  login: () => void;
  logout: () => void;
}

const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      isLoggedIn: false,
      login: () => set({ isLoggedIn: true }),
      logout: () => set({ isLoggedIn: false }),
    }),
    {
      name: 'user-storage', // 저장소에 쓰일 고유 키 이름
    }
  )
);

저장소 선택 및 부분 저장

기본값은 localStorage이지만, 필요에 따라 설정을 변경할 수 있다.
- 저장소 변경: sessionStorage를 쓰고 싶다면 storage 옵션을 추가한다.
- 특정 상태만 저장 (Partialize): 스토어의 모든 데이터가 아닌, 필요한 데이터만 골라서 저장할 때 유용하다.

{
  name: 'app-storage',
  // 세션 스토리지 사용 시
  storage: createJSONStorage(() => sessionStorage), 
  // isLoggedIn만 저장하고 나머지는 제외하고 싶을 때
  partialize: (state) => ({ isLoggedIn: state.isLoggedIn }),
}

Hydration 문제 해결 (Next.js 또는 SSR 환경)

persist는 브라우저의 저장소를 사용하기 때문에, 서버 사이드 렌더링(SSR) 환경에서는 서버와 클라이언트의 초기 데이터가 달라 Hydration Error가 발생할 수 있다.
이를 방지하기 위해 onRehydrateStorage를 활용하거나 클라이언트에서만 렌더링되도록 처리해야 한다.

// 상태가 복구되었는지 확인하는 flag를 두는 방식
const useStore = create(
  persist(
    (set) => ({
      data: [],
      _hasHydrated: false,
      setHasHydrated: (state) => set({ _hasHydrated: state }),
    }),
    {
      name: 'my-store',
      onRehydrateStorage: () => (state) => {
        state?.setHasHydrated(true);
      },
    }
  )
);

버전 관리

앱이 업데이트되어 상태 구조가 변경되었을 때, 이전 유저의 로컬 스토리지 데이터와 충돌이 날 수 있다.
이때 version과 migrate를 사용한다.

{
  name: 'user-storage',
  version: 1, // 버전 번호
  migrate: (persistedState: any, version: number) => {
    if (version === 0) {
      // 구버전 데이터를 신버전 구조로 변환하는 로직
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
}