전역상태 관리한 값을 새로고침할 시 유지하는 방법에 대해 알아보자 (w/ zustand)

zustand를 이용하여 전역상태를 관리하였다.
여러 컴포넌트에서 데이터를 받아서 저장하는데, 사용자가 새로고침을 한다면 기존에 저장하고 있던 store의 데이터가 모두 날라가서 초기값이 뜨는 문제가 발생했다.
그래서 나는 이 문제를 cookie로 저장을 해야하는 것인가? 생각을 하였다.
그러면 전역상태관리를 쓸 필요가 없다고 생각이 들었다.
검색을 해보니까 zustand에서 persist라는 것이 있었다.
persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다.

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

export const useTeamStore = create(
  persist<TeamProps>(set => ({
    team: [],
    selectedTeam: {
      id: 0,
      name: '',
      logo: '',
      timezone: '',
      values: [
        {
          id: 0,
          emoji: '',
          name: '',
        },
      ],
    },
    updateTeam: res => {
      set({ team: res ? res : initialTeamState });
    },
    clearTeam: () => {
      set({ team: initialTeamState });
    },
    setSelectedTeam: res => {
      set({
        selectedTeam: res,
      });
    },
  })),
);

위와 같이 store를 create해줄 때 persist 미들웨어를 추가해주기만 하면 된다.
이제 새로고침을 하여도 전역 상태값이 그대로인 것을 확인할 수 있다.

이제 새로고침을 하여도 전역 상태값이 그대로인 것을 확인할 수 있다.
여기서 name값을지정해주지 않으면, undefined의 key로 object가 value로 저장되기 때문에 name을 unique한 값으로 꼭 주어야한다.

persist를 쓸 때 next.js라면 참고할 점 !

Hydration Failed

서버에서 렌더링을 할 때 window객체가 당연히 undefined가 되기 때문에 localStorage에 접근이 되지 않는다.
hook으로 감싸서 리턴하는 방법이 있다고 한다.
나는 React를 이용한 프로젝트였기 때문에 에러가 발생하지 않았다.
발생한 사람들은 아래 참고문서를 확인해보길 바란다.

참고문서
https://docs.pmnd.rs/zustand/integrations/persisting-store-data
https://kbwplace.tistory.com/152