React Zustand persist 미들웨어

1. persist 미들웨어

persist는 Zustand 상태를 지정된 스토리지에 저장하고, 페이지를 새로고침하거나 애플리케이션을 다시 열 때 해당 상태를 복원하는 역할을 한다.

 

1-2. 특징

• 상태 저장 및 원본: 상태를 브라우저의 localStorage 또는 sessionStorage 같은 스토리지에 저장한다.
• 기본 키 제공: 저장소에서 상태를 구분하기 위한 키를 설정할 수 있다.
• 직렬화/역직렬화: 상태를 JSON형식으로 저장하고 복원한다.
• 선택적 상태 저장: 필요한 특정 상태만 선택적으로 저장할 수 있다.

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    {
      name: 'my-store', // localStorage에 저장될 키
    }
  )
);

export default useStore;

 

1. persist는 내부적으로 상태 변화를 감지한다.
2. 상태가 변경되면 해당 상태를 JSON으로 직렬화하고 설정된 스토리지에 저장한다.
3. 애플리케이션이 다시 실행되 때 저장된 상태를 역질렬화하고 복원한다.

 

2. createJSONStorage

createJSONStorage는 기본적으로 persist에서 사용하는 저장소를 설정하기 위해 사용된다. 예를 들어, 상태를 localStorage 대신 sessionStorage에 저장하려는 경우, 이 유틸리티를 사ㅓ용해 커스텀 저장소를 생성할 수 있다.

 

2-1. 주요 특징

• 다양한 스토리지 지원: 기본적으로 localStorage를 사용하지만, 원하는 스토리지(예: sessionStorage 또는 커스텀 스토리지)로 변경할 수 있다.
• JSON 기반 직렬화/역직렬화: 상태를 JSON 형식으로 저장하고 복원한다.

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

const useStore = create(
  persist(
    (set) => ({
      user: null,
      setUser: (user) => set({ user }),
    }),
    {
      name: 'user-store', // 스토리지 키
      storage: createJSONStorage(() => sessionStorage), // sessionStorage를 사용
    }
  )
);

export default useStore;

 

1. createJSONStorage를 통해 원하는 스토리지를 설정한다.
2. persist는 이 설정을 기반으로 상태를 저장하고 복원한다.

 

3. 옵션

persist는 다양한 옵션을 제공하여 동작 방식을 커스텀마이징을 할 수 있다.

옵션	설명	기본값
name	스토리지에 저장될 키 이름	필수
storage	사용할 스토리지 (localStorage, sessionStorage, 또는 커스텀)	localStorage
serialize	상태를 저장하기 전에 커스터마이징하는 함수	JSON.stringify
deserialize	저장된 데이터를 불러올 때 커스터마이징하는 함수	JSON.parse
partialize	상태에서 특정 부분만 저장하도록 필터링	저장된 모든 상태
onRehydrateStorage	스토리지에서 상태를 복원한 후 실행할 함수	없음

 

예시

persist(
  (set) => ({
    count: 0,
    text: '',
  }),
  {
    name: 'partial-store',
    partialize: (state) => ({ count: state.count }), // count만 저장
  }
);

 

상태 복원 후 특정 동작 수행

 

const useStore = create(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
    }),
    {
      name: 'auth-store',
      onRehydrateStorage: () => {
        console.log('스토리지에서 상태 복원 완료!');
      },
    }
  )
);