새로 고침 후에도 전역상태를 유지하는 법 (Zustand persist)

서론

기존에 프로젝트를 진행할 때, 로그인 여부를 확인하기 위한 userId를 LocalStorage에 저장하여 관리하였었다.
하지만, 상태관리 라이브러리인 Zustand를 도입하면서 userId도 Zustand를 통해 관리하는 것이 좋다고 판단하였다.
그래서 userId를 store에서 관리하도록 코드를 수정해 보았다.

userId를 store로 분리

이전에 상태를 만든 것과 같이 userId를 저장할 store를 만들기 위해 아래와 같이 코드를 작성하였다.

import { create } from 'zustand';

interface userState {
  userId: number;
  setUserId: (newUserId: number) => void;
}

const useUserStore = create<userState>((set) => ({
  userId: 0,
  setUserId: (newUserId) => set({ userId: newUserId }),
}));

export default useUserStore;

위와 같이 store를 만들고, 컴포넌트에서 userId를 필요로 할 때마다 LocalStorage가 아닌 store에서 불러올 수 있도록 코드를 수정하였다.

 

새로 고침 시 로그인 상태가 초기화되는 문제

처음엔 코드가 잘 수정된 줄 알았지만, 한 가지 문제가 생겼다.
바로 새로 고침을 하면 로그인 상태가 유지되지 않는다는 것이었다. 
LocalStorage는 브라우저를 닫아도 정보가 유지되어 로그인 여부를 확인할 수 있었다.
하지만 Zustand를 포함한 대부분의 전역 상태 관리 라이브러리들은 상태를 메모리에 유지한다.
그래서 페이지가 새로 고침 되면 JavaScript 환경이 초기화되어 이전에 저장해 둔 데이터가 사라져 로그인 여부를 확인할 수 없었던 것이다.

Zustand의 persist

이를 해결하기 위해 방법을 찾던 중 Zustand의 persist에 대해서 알게 되었다.
persist는 Zustand의 미들웨어인데, 상태를 LocalStorage와 같은 저장소에 저장하여 데이터를 유지할 수 있도록 해준다.
코드는 아래와 같이 수정해 주었다.

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

interface userState {
  userId: number;
  setUserId: (newUserId: number) => void;
}

const useUserStore = create(
  persist<userState>(
    (set) => ({
      userId: 0,
      setUserId: (newUserId) => set({ userId: newUserId }),
    }),
    {
      name: 'userIdStorage',
    },
  ),
);

export default useUserStore;

먼저 기존의 store와 같이 상태를 명시해 준다.
그리고 옵션을 설정해주어야 한다.
name은 필수적인 옵션으로 저장소의 키 값이 된다.
옵션으로 storage를 변경할 수도 있다.
기본 값은 LocalStorage며, 다른 저장소를 사용하려면 해당 옵션을 통해 변경해 주면 된다.

위의 코드를 사용하니 LocalStorage에 아래와 같이 상태가 저장되는 것을 확인할 수 있었다.

 

persist를 사용하면 LocalStorage와 마찬가지로 clear를 해줘야 할 때가 생긴다.

로그 아웃 시 clear를 할 수 있도록 로그 아웃 버튼의 클릭 이벤트 발생 시 해당 함수를 실행할 수 있도록 코드를 수정하였다.

import useUserStore from '@store/useUserStore';

const clearUserIdStorage = useUserStore.persist.clearStorage;

const onClickLogout = async () => {
    const isLogout = await logout();

    if (isLogout) {
      setUserId(0);
      clearUserIdStorage();
      navigate('/login');
    }
  };

userId를 먼저 0으로 초기화하고, clearStorage를 통해 storage를 초기화하여 로그 아웃을 시킬 수 있었다.

 

후기

비록 persist를 사용하더라고 계속 LocalStrage를 사용하는 것에는 변함이 없었지만,
LocalStorage로 관리하던 userId를 상태관리 라이브러리를 통해 관리하니 일관성 있는 코드를 작성할 수 있어서 좋았다.
나중에 기본값인 LocalStorage가 아닌 다른 저장소를 이용하여 관리를 해보는 것도 시도해 볼 예정이다.

참고

https://docs.pmnd.rs/zustand/integrations/persisting-store-data

https://velog.io/@dpldpl/Zustand-persist-페이지-새로고침-시-전역상태-초기화-방지-문제-해결