Zustand와 persist 미들웨어

zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 할 수 있게 해주는 상태 관리 라이브러리입니다. persist 미들웨어를 사용하면 상태를 브라우저의 스토리지(로컬 스토리지 또는 세션 스토리지)에 저장할 수 있습니다. 이를 통해 페이지를 새로 고침하거나 브라우저를 닫았다 열어도 상태가 유지될 수 있습니다.

Zustand 스토어 생성

zustand의 create 함수를 사용하여 상태를 생성합니다. 여기에 persist 미들웨어를 사용하여 상태를 세션 스토리지에 저장합니다.

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

// 상태 인터페이스 정의
export interface TabState {
  tab: number; // 탭 번호를 저장
  setTab: (data: number) => void; // 탭 번호를 설정하는 함수
}

const useTabStore = create<TabState>()(
  persist(
    (set) => ({
      tab: 1, // 초기 탭 번호를 1로 설정
      setTab: (data: number) => set(() => ({
        tab: data, // 탭 번호를 업데이트하는 함수
      })),
    }),
    {
      name: 'tab-storage', // 세션 스토리지에 저장될 키 이름
      getStorage: () => sessionStorage, // 상태를 저장할 스토리지를 세션 스토리지로 설정
    }
  )
);

export default useTabStore;

persist 미들웨어 설정

persist 미들웨어는 상태를 지정된 스토리지에 저장하고, 앱이 다시 로드될 때 이 저장소에서 상태를 복원합니다.

다음은 이 설정의 구성 요소입니다:

name

상태를 저장할 키 이름입니다. 여기서는 'tab-storage'로 설정했습니다.

getStorage

상태를 저장할 스토리지를 지정합니다. 여기서는 sessionStorage를 사용합니다.

작동 방식

초기 로드 시

persist 미들웨어는 지정된 스토리지(sessionStorage 등)에서 name에 해당하는 키를 찾습니다.
해당 키에 저장된 데이터가 있으면, 그 데이터를 불러와서 상태를 초기화합니다.
데이터가 없으면, 설정한 초기 상태(여기서는 tab: 1)로 상태를 설정합니다.

상태 업데이트 시

setTab 함수를 호출하여 tab 상태를 업데이트할 때마다, 이 상태가 지정된 스토리지에 저장됩니다.
이후 페이지를 새로 고침해도 저장된 상태가 유지됩니다.