zustand persist

zustand로 persist를 사용한다면 새로고침 후에도 그 값을 사용하도록 할 수 있다. persist를 사용하면 storage에 그 값을 저장하여 해당 데이터를 유지할 수 있다고 한다.

퍼시스트 미들웨어를 사용하면 저장소(예: localStorage, AsyncStorage, IndexedDB 등)에 Zustand 상태를 저장하여 데이터를 지속시킬 수 있습니다. 이 미들웨어는 localStorage와 같은 동기식 저장소와 AsyncStorage와 같은 비동기식 저장소를 모두 지원하지만 비동기식 저장소를 사용하면 비용이 발생한다는 점에 유의하세요.
출처: zustand 공식 문서

사용방법

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

export const useBearStore = create(
  persist(
    (set, get) => ({
      bears: 0,
      addABear: () => set({ bears: get().bears + 1 }),
    }),
    {
      name: 'food-storage', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
    },
  ),
)

option으로 들어가는 뒤의 객체에 storage의 타입을 정할 수 있는데 아무것도 없다면 localStorage를 기본으로 사용한다.

로그아웃을 구현하면서 이 로컬스토리지를 비웠어야 했는데 이 스토리지를 비울 방법이 또 지원되고있다.

clearStorage

스토리지에 저장된 모든 항목을 지운다.

useBoundStore.persist.clearStorage()