[ React / Recoil ] React의 상태관리 라이브러리 Recoil의 effects 사용하기.

나는 보통 react 프로젝트를 하게 되면 간단한 상태 관리들은 대부분 recoil을 통해 하는데

이번에 recoil의 부가적인 기능들에 대해 더 서치를 하다가 Atom Effects에 대해 알아보게 되었다.

 

Recoil 공식 페이지의 Atom Effects 설명은 아래 링크를 통해 참고하면 된다.

atom effects - recoil

 

 

 

recoil 공식 페이지에서 소개하는 atom effects는 부수효과들을 관리하고 Recoil의 atom을 초기화하거나 동기화하기 위해 사용하는 API라고 설명한다.

 

Atom Effects

- 상태 지속성

- 상태 동기화

- 히스토리 관리

- 로깅

 

등에 유용하고 React Effects와도 유사하지만 Atom Effects는 atom을 정의할 때 atom 정의의 일부로 정의 된다고 한다.

즉 effects와 atom 정의를 함께 배치하게 하는 동기화 효과라고 볼 수 있겠다.

 

Atom Effects는 대부분의 경우 리액트의 useEffect()로 대체될 수 있으나 atom의 집합은 리액트 컨텍스트의 외부에서 생성되며, 특히 동적으로 생성된 atom의 경우 리액트 컴포넌트 내에서 효과를 관리하기 어려울 수 있고 처음에 atom 값을 초기화하거나 서버 사이드 렌더링(SSR)과 함께 사용될 수도 없어서 atom effects를 사용하는 것이라고 안내한다.

 

 

 

 

Atom Effects 정의

type AtomEffect<T> = ({
  node: RecoilState<T>, // A reference to the atom itself
  storeID: StoreID, // ID for the <RecoilRoot> or Snapshot store associated with this effect.
  trigger: 'get' | 'set', // The action which triggered initialization of the atom

  // Callbacks to set or reset the value of the atom.
  // This can be called from the atom effect function directly to initialize the
  // initial value of the atom, or asynchronously called later to change it.
  setSelf: (
    | T
    | DefaultValue
    | Promise<T | DefaultValue> // Only allowed for initialization at this time
    | ((T | DefaultValue) => T | DefaultValue),
  ) => void,
  resetSelf: () => void,

  // Subscribe to changes in the atom value.
  // The callback is not called due to changes from this effect's own setSelf().
  onSet: (
    (newValue: T, oldValue: T | DefaultValue, isReset: boolean) => void,
  ) => void,

  // Callbacks to read other atoms/selectors
  getPromise: <S>(RecoilValue<S>) => Promise<S>,
  getLoadable: <S>(RecoilValue<S>) => Loadable<S>,
  getInfo_UNSTABLE: <S>(RecoilValue<S>) => RecoilValueInfo<S>,
}) => void | () => void; // Optionally return a cleanup handler

 

Atom Effects는 effects 옵션을 통해 atoms와 연결되어 있고 각각의 atom은 초기화될 때 우선순위에 따라 호출되는 atom effect 함수들의 배열을 참조할 수 있다고 한다.

 

atom effects의 초기화를 위한 cleanup 핸들러를 가지고 있다.

 

 

 

 

내가 하고싶었던 atom effects의 기능은 로컬 스토리지 지속성 파트였는데, 아래와 같은 설명이 적혀있었다.

Atom Effects는 atom 상태를 브라우저 로컬 스토리지에서 유지하기 위해서 사용될 수 있습니다. localStorage 는 동기식이므로 데이터를 async/await 혹은 Promise 없이 직접 받아올 수 있습니다.

 

 

 

 

아래는 Atom Effects를 이용하여 localStorage와 동기화 및 초기화 작업을 해주는 코드이다.

const localStorageEffect = key => ({setSelf, onSet}) => {
  const savedValue = localStorage.getItem(key)
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }

  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

const currentUserIDState = atom({
  key: 'CurrentUserID',
  default: 1,
  effects: [
    localStorageEffect('current_user'),
  ]
});

이런 식으로 로컬 스토리지 이펙트를 만들어 사용할 수 있다.

 

 

실제로 refreshToken을 얻어서 atom에 setRecoilValue를 통해 token을 저장하니 자동으로 localStorageEffect 이벤트가 발생하며 정상적으로 로컬 스토리지에 저장되는 것을 확인했다!

 

 

Recoil은 다른 상태 관리 라이브러리들에 비해 가볍고 상태 관리를 위한 최소한의 기능들만 제공한다고 생각했었는데 부가 기능들을 꼼꼼히 보지 않은 나의 무지한 판단이었다.ㅋㅋ 역시 가볍게 훑어보고 판단하면 안 된다는 것을 또 한 번 느꼈다.