[Recoil] Atom Effects를 이용해 LocalStorage와 연동하기

기존에 Recoil-persist 라이브러리를 사용해 Local storage와 연동하는 식으로 코드를 작성한 적이 있었는데,공식 문서에 라이브러리를 쓰지 않고 연동할 수 있는 방법이 명시되어 있는 것을 확인했다.

Atom Effects란?

• 부수효과를 관리하고 Recoil의 atom을 초기화 또는 동기화하기 위한 API
• state persistence(상태 지속성), state synchronization(상태 동기화), managing history(히스토리 관리), logging(로깅) 등등 유용한 어플리케이션을 여럿 가지고 있음
• 각 atom은 자체적인 정책들을 지정하고 구성할 수 있음

Atom Effects는 atom상태를 local storage에서 유지하기 위해 사용될 수 있다.

아래의 코드를 통해, state 변경 시 effects에 있는 함수가 실행되면서 localStorage에 저장된 값을 변경할 수 있다.

const localStorageEffect = key => ({setSelf, onSet}) => {
   // 초기 값 설정
    const savedValue = localStorage.getItem(key) // 로컬 스토리지에서 해당 key에 저장된 값을 가져옴
    if (savedValue != null) { // 만약 저장된 값이 있다면, recoil 상태를 해당값으로 초기화
      setSelf(JSON.parse(savedValue));
     }

     // 변경 감지 및 업데이트
    onSet((newValue, _, isReset) => {
        // 현재 recoil 상태가 리셋되었다면 해당 key 제거, 아니라면, Recoil 상태가 변경된 것이므로 새로운 값을 문자열로 변환 후 저장
        isReset ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue));
    });
};

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

• setSelf
  연결된 atom의 값을 저장소에 저장된 데이터로 초기화 해주는 함수
• onSet
  atom의 값이 변경이 되었을 때 실행되는 함수이다.
• isReset
  Recoil 상태가 리셋되었는지 여부를 나타내는 부울(boolean) 값 (gpt say..)

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