React - zustand middleware - persist

Localstorage에 정보를 저장하기위해선 setitem, getitem, useeffect등을 써서 저장을 해주고,

새로고침해도 변화가 안되게 만들었었는데,

zustand의 middleware인 persist를 사용하면 자동으로 Localstorage에 저장하고 유지해준다.

하지만 잘못된 값이 들어간경우 화면이 공백으로 표시되니 Localstorage에 들어가서 데이터를 삭제해줘야한다.

export const useStore = create(
  persist((set) => ({
    todos: [],
    addTodo: (todoText) =>
      set((state) => ({
        todos: [
          ...state.todos,
          {
            text: todoText,
            id: uuid(),
            isCompleted: false,
            edit: false,
          },
        ],
      })),
    deleteTodo: (todoId) =>
      set((state) => ({
        todos: state.todos.filter((todo) => todo.id !== todoId),
      })),
    completeTodo: (todoId) =>
      set((state) => ({
        todos: state.todos.map((todo) => {
          if (todo.id === todoId) {
            if (todo.isCompleted === false) {
              return { ...todo, isCompleted: true };
            } else if (todo.isCompleted === true) {
              return {
                ...todo,
                isCompleted: false,
              };
            }
          }
          return todo;
        }),
      })),
    editTodo: (todoId) => {
      set((state) => {
        return {
          todos: state.todos.map((todo) =>
            todo.id === todoId ? { ...todo, edit: !todo.edit } : todo
          ),
        };
      });
    },
    controlTodo: (todoId, text) => {
      set((state) => {
        return {
          todos: state.todos.map((todo) =>
            todo.id === todoId ? { ...todo, text } : todo
          ),
        };
      });
    },
  }))
);

위의 코드는 zustand의 store를 만든 코드인데 두번 째줄에 보면 persist로 전체를 감싸는 방식으로 사용하면 된다.

간편하고 쉽고 좋다.