[React] Recoil 상태 값 유지 (effects)

상태관리 라이브러리 특성상 새로고침하거나 페이지를 닫게 되면 저장된 상태 값이 날라간다.
이를 방지하기 위해 recoil 에 따로 설정을 해줘야 한다.

많이 보이는 방법 중 하나가 recoil-persist 라이브러리를 사용하는 것이였다.
근데 이 라이브러리를 사용하게 되면 atom에 effects_UNSTABLE 옵션을 붙여서 설정해야하는데 언스테이블이라는 말이 맘에 안들었다.

그래서 공식문서를 보다 effects 라는 걸 봤다. 공식문서에서는 다음과 같이 설명한다.

Atom effects는 사이드 이펙트를 관리하고, 리코일 atom 초기화 or 동기화를 하기 위한 API이다.

useEffect처럼 사용할 수 있다는 것 같았다.

const someState = atom<string>({
  key: "someState",
  default: "",
  effects: [
    ({ setSelf, onSet }) => {
      const savedData = sessionStorage.getItem("someState");
      if (savedData) {
        setSelf(JSON.parse(savedData));
      }

      onSet((newValue, _, isReset) => {
        isReset ? sessionStorage.removeItem("someState") : sessionStorage.setItem("someState", JSON.stringify(newValue));
      });
    },
  ]
});

어떤 atom 값을 sessionStorage와 연동시킨 예제이다.
여기서 주목해야하는 것은 setSelf와 onSet이다.

• setSelf: 스토리지에 저장된 값을 atom에 넣어주는 역할을 한다.
• onSet: atom의 변화를 감지해서 스토리지에 값을 변경한다.

ref

• https://recoiljs.org/docs/guides/atom-effects#local-storage-persistence