[Zustand] persist를 사용하여 새로고침 후에도 전역상태를 유지하는 방법

 

 

 

React 프로젝트를 하며 전역 상태 라이브러리로 Zustand를 사용하고 있었다.
전역 상태를 사용해야하면서, 새로 고침 후에도 값이 남아있도록 local storage에 값을 저장해야했다. 

 

https://zustand.docs.pmnd.rs/migrations/migrating-to-v4#persist

zustand 공식 문서를 찾아보았더니,  Persist middleware 를 사용하면, 

state 를 local storage 에 저장하여 새로고침 후에도 값이 저장되는 것이었다. 

import { persist } from 'zustand/middleware'

 

 

 

나의 코드 예시를 보자 

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

interface ProjectState {
  projectTitle: string;
  setProjectTitle: (newTitle: string) => void;
}

export const useProjectStore = create(
  persist<ProjectState>(
    (set) => ({
      projectTitle: "Project No.1",
      setProjectTitle: (newTitle) => set({ projectTitle: newTitle }),
    }),
    {
      name: "project-storage", // 상태를 저장할 때 사용하는 키의 이름
      storage: createJSONStorage(() => localStorage), // 상태를 저장할 저장소
    }
  )
);

참고로, 

이렇게 local storage 에 저장하는 방법 외에도 session storage 에 저장할 수도 있다. ! 이때는 직접 storage 를 지정해주면 끝. 

감사합니다