TIL 74. 2024-04-16

zustand의 persist를 통해 localStorage 및 sesstionStorage에서 관리 (optional)이기 때문에 해당 줄을 적지 않으면 'localStorage'가 기본 저장소로 사용된다.

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

const useConnectStore = create(
  persist<ConnectState>(
    (set) => ({
      isConnected: false,
      nickname: "",
      userId: "",
      roomId: "",
      setConnectionStatus: (status) => set({ isConnected: status }),
      setRoomId: (id) => set({ roomId: id }),
      setUserId: (id) => set({ userId: id }),
      setUserNickname: (id) => set({ nickname: id })
    }),
    { name: "CreateRoomInfo", storage: createJSONStorage(() => sessionStorage) }
  )
);

export default useConnectStore;

👇👇👇

• 참고사이트

• localStoage와 sesstionStorage의 차이