[TIL-0511] Zustand의 persist

🌟 장바구니 목록 상태 조건

장바구니 목록 상태는 다음 두 가지 조건을 충족해야 한다.

1. 위 페이지(장소 탐색 페이지)에서 새로고침을 하여도 장바구니 목록에 들어있는 요소가 유지되어야 함
2. 장소 탐색 페이지에서 다른 페이지로 이동했다가, 다시 장소 탐색 페이지로 돌아오면, 장바구니 목록이 리셋되어야 함

➡️ 즉, 장소 탐색 페이지를 벗어날 때에만 장바구니 목록이 리셋되어야 함

첫 번째 조건을 충족시키기 위해서 Zustand의 persist 기능을 사용하였다.

---

🌟 persist란?

• 브라우저에 상태(state)를 저장해서 새로고침해도 유지되도록 도와주는 기능

• React 앱에서는 상태를 useState나 Zustand 같은 라이브러리로 관리함 → 그런데, 브라우저를 새로고침하면 이 상태는 기본적으로 모두 초기화됨

  • 예를 들어, 사용자가 로그인해서 isLoggedIn: true인 상태를 만들었는데, 새로고침하면 상태는 사라지고 false로 돌아가버림
  • 이럴 때 persist를 쓰면, 상태를 브라우저의 localStorage나 sessionStorage에 저장해서 새로고침해도 복구되게 해줌

---

🌟 persist 설치 방법

• persist는 zustand 패키지에 내장된 미들웨어임
• 따라서 zustand를 설치하면, persist를 사용할 수 있음

  npm install zustand

---

🌟 persist 기본 사용법 (예제)

로그인 상태를 저장하기

// store/useAuthStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

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

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      isLoggedIn: false,
      login: () => set({ isLoggedIn: true }),
      logout: () => set({ isLoggedIn: false }),
    }),
    {
      name: 'auth-storage', // localStorage에 저장될 key 이름
    }
  )
)

사용 예시 (컴포넌트)

import { useAuthStore } from './store/useAuthStore'

function App() {
  const { isLoggedIn, login, logout } = useAuthStore();
  
  return (
    <div>
      <h1>{isLoggedIn ? '로그인됨' : '로그아웃됨'}</h1>
      <button onClick={login}>로그인</button>
      <button onClick={logout}>로그아웃</button>
    </div>
  )
}

• 로그인 버튼을 눌러 isLoggedIn을 true로 만든 뒤, 브라우저를 새로고침하면 상태가 유지됨

---

🌟 persist의 저장 위치 지정하기

• 기본적으로 persist는 로컬 스토리지(localStorage)에 저장함

• 저장 위치를 세션 스토리지(sessionStorage)로 바꾸고 싶다면 storage 옵션을 다음과 같이 설정해야 함

  persist(
    (set) => ({ /* state */ }),
    {
      name: 'my-storage',
      storage: createJSONStorage(() => sessionStorage),
    }
  )

  • createJSONStorage() : Zustand의 상태를 JSON 형태로 안전하게 로컬 스토리지나 세션 스토리지에 저장할 수 있도록 도와주는 래퍼 함수

  • 날짜 객체나 특수한 포맷이 있다면 replacer, reviver를 추가하면 좋음

    import { create } from 'zustand'
    import { persist, createJSONStorage } from 'zustand/middleware'
    
    interface DateState {
      someDate: Date;
      setDate: (date: Date) => void;
    }
    
    export const useDateStore = create<DateState>()(
      persist(
        (set) => ({
          someDate: new Date(),
          setDate: (date) => set({ someDate: date }),
        }),
        {
          name: 'date-store',
          storage: createJSONStorage(() => sessionStorage, {
            // 저장할 때 Date를 객체로 바꿈
            replacer: (key, value) => {
              if (key === 'someDate') return { type: 'date', value }
              return value
            },
            // 불러올 때 Date 객체로 다시 복원
            reviver: (key, value) => {
              if (value && value.type === 'date') return new Date(value.value)
              return value;
            },
          }),
        }
      )
    )

    🧠 코드 해석

    1. replacer
       • 이 함수는 언제 호출될까?
         • Zustand가 상태를 저장소에 저장할 때 JSON.stringify()를 씀
         • 이때 각 key-value 쌍마다 이 replacer 함수가 자동으로 호출됨
       • 무슨 일을 할까?
         • key === 'someDate'인 항목, 즉 날짜 값을 만나면
         • 문자열로 저장하지 않고, 타입 정보를 포함한 객체로 감싸서 저장함

           "someDate": {
             "type": "date",
             "value": "2025-05-13T14:00:00.000Z",
           }

    2. reviver
       • 이 함수는 언제 호출될까?
         • 상태를 다시 불러올 때 JSON.parse()를 씀
         • 각 key-value 쌍마다 이 reviver 함수가 자동으로 호출됨
       • 무슨 일을 할까?
         • 저장된 문자열을 불러왔을 때, value가 {type: 'date', value: '...'} 형태라면
         • 그것을 다시 new Date(value.value)로 감싸서 진짜 Date 객체로 복원함

    ❓ replacer / reviver가 필요한 이유

    • 브라우저 저장소는 오직 문자열만 저장할 수 있음
    • 그래서 Date 같은 객체를 그냥 저장하면 "2025-05-13T13:00:00.000Z"처럼 문자열로 바뀜
    • 문제점: 불러올 때 타입이 Date였는지 string이었는지 알 수 없음 → new Date()로 다시 만들어줘야 함
    • 그래서 다음과 같이 구분함
      • replacer : 저장할 때 Date를 {type: 'date', value: '...'} 형식으로 감싸줌
      • reviver : 불러올 때 그걸 다시 new Date()로 복원함

---

🌟 저장된 상태 지우는 방법

상태를 리셋하거나 저장소를 초기화하고 싶을 때는 clearStorage를 씀

import { useAuthStore } from './store/useAuthStore'
           
useAuthStore.persist.clearStorage();

또는 removeItem을 사용하여 제거해도 됨

sessionStorage.removeItem('date-store');

---

🌟 partialize를 이용해서 저장할 상태 선택하기

상태를 일부만 저장하고 싶을 때는 partialize 옵션을 사용함

persist(
  (set, get) => ({
    username: '',
    token: '',
    isLoggedIn: false,
    setUsername: (name: string) => set({ username: name }),
    // ...
  }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ token: state.token }), // token만 저장
  }
)

• persist는 상태 전체 중에서 token만 저장소(로컬 스토리지나 세션 스토리지 등)에 저장함
• username과 isLoggedIn은 저장소에 저장되지 않기 때문에, 새로고침 시 초기값(''와 false)으로 돌아감

---

🌟 커스텀 serialize/deserialize

• serialize : 저장되는 값을 문자열로 바꾸는 과정
• deserialize : 다시 불러올 때 해석하는 과정
• JSON이 아닌 다른 포맷을 쓰고 싶다면 다음과 같이 작성하면 됨

  persist(
    (set) => ({ /* 상태*/ }),
    {
      name: 'custom-storage',
      serialize: (state) => btoa(JSON.stringify(state)), // Base64 인코딩
      deserialize: (str) => JSON.parse(atob(str)),
    }
  )

---

✍️ 구현 예시

// src/stores/favoriteList.store.ts

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";
           
type FavoriteItem = {
  placeName: string;
  placeImg: string;
};

interface FavoriteListState {
  favoriteList: FavoriteItem[];
  addFavoriteList: (placeName: string, placeImg: string) => void;
  deleteFavoriteList: (placeName: string, placeImg: string) => void;
  resetFavoriteList: () => void;
}
           
export const useFavoriteListStore = create<FavoriteListState>()(
  persist(
    (set, get) => ({
      favoriteList: [],
      addFavoriteList: (placeName: string, placeImg: string) => {
        const currentList = get().favoriteList;
        
        // 중복 추가 방지
        const isDuplicate = currentList.some(
          (item) => item.placeName === placeName && item.placeImg === placeImg);
        if (isDuplicate) return;
        
        set({ favoriteList: [...currentList, { placeName, placeImg }]});
      },
      deleteFavoriteList: (placeName: string, placeImg: string) => {
        const currentList = get().favoriteList;
        
        set({
          favoriteList: currentList.filter((item) => item.placeName !== placeName && item.placeImg !== placeImg),
        });
      },
      resetFavoriteList: () => set({ favoriteList: [] }),
    }),
    {
      name: 'favorite-list',
      storage: createJSONStorate(() => sessionStorage),
    }
  )
)

정보 탐색 페이지에서 경복궁을 장바구니에 담고,

세션 스토리지를 확인해보면 다음과 같이 내용이 잘 들어간 것을 볼 수 있다.