# prev/state 로 상태관리하기 → 추후 immer 미들웨어 사용

import { create } from "zustand";
import { devtools } from "zustand/middleware";

const collectionStore = (set) => ({
  collection: {
    collectionName: "",
    key: 0
  },
  setCollection: (collectionName, key) =>
    set({
      collection: {
        collectionName,
        key,
      }
    }),
  collectionList: [],
  setCollectionList: (newCollection) =>
    set((prev) => ({
      collectionList: [...prev.collectionList, newCollection]
    })),
  deleteCollectionList: (index) => set((prev) => {
    const deletedCollectionList = [...prev.collectionList];

    deletedCollectionList.splice(index, 1);

    return {
      collectionList: deletedCollectionList
    };
  }),
});

const useCollectionStore = create(devtools(collectionStore));

export {
  useCollectionStore,
};

# zustand에서 웹 스토리지 사용하기

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

const collectionStore = persist(
  (set) => ({
    collection: {
      collectionName: "",
      key: 0,
    },
    setCollection: (collectionName, key) =>
      set({
        collection: {
          collectionName,
          key,
        }
      }),
    collectionList: [],
    setCollectionList: (newCollection) =>
      set((prev) => ({
        collectionList: [...prev.collectionList, newCollection]
      })),
    deleteCollectionList: (index) => set((prev) => {
      const deletedCollectionList = [...prev.collectionList];

      deletedCollectionList.splice(index, 1);

      return {
        collectionList: deletedCollectionList
      };
    }),
  }),
  {
    name: "collection-storage",
    storage: createJSONStorage(() => sessionStorage),
  }
);

const useCollectionStore = create(devtools(collectionStore));

export {
  useCollectionStore,
};

• 내 스키마

• immer을 사용해보기

• persist 로 웹 스토리지 사용해보기

References

• 새로고침 후에도 값을 사용할 수 있도록 스토리지에 값을 저장해야 하는 경우 persist 사용

  zustand persist로 스토리지에 전역 상태 저장하기

• zustand-persisting-store-data

React 상태 관리 라이브러리 Zustand의 코드를 파헤쳐보자

Zustand Documentation