[Recoil] Recoil-persist

Recoil이 처음이시라면 -> 여기 먼저 💡

Recoil-persist..? 😏

진행하고 있는 web 프로젝트에서 Recoil을 사용하여 유저 정보를 담은 Recoil state를 관리해야 하는 구현이 필요한 상황이다.

Redux의 경우에는 Redux-persist를 사용하여 페이지가 새로고침 되어도 state를 유지할 수 있는데, Recoil에서도 Redux-persist와 같은 기능을 해줄 수 있는 방법이 없을까? 라는 생각이 들었습니다.

그래서 구글링을 실시하였고, Recoil-persist라는 라이브러리를 알게되었습니다! ✌🏻

Recoil-persist 작동 원리 🛠

Recoil-persist를 사용하면 이전처럼 새로고침을 해도 Recoil state가 초기화되지 않고 sessionStorage 또는 localStorage에 보관됩니다.

아무런 설정도 해주지 않으면 key는 'recoil-persist', 저장소는 localStorage에 기본적으로 저장됩니다.

(+ Next.js를 사용하시는 경우 추가설정 없이 localStorage와 sessionStorage를 사용한다면
"(local)sessionStorage is not defined"와 같은 에러가 뜨게 되므로, 추가적인 설정이 필요합니다.

이 문제는 Next.js가 기본적으로 SSR을 사용하기 때문에, localStorage와 sessionStorage는 SSR에서 사용할 수 없는 객체인 window에 접근하므로 발생합니다.)

Recoil-persist 적용 💻

// recoil-persist 설치
npm install recoil-persist

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';
import { UserState } from "types/userState.type";

// localStorage에 저장되며, key 이름을 'userState'로 저장
const { persistAtom } = recoilPersist({
  key: "userState", // 원하는 key 값 입력
  storage: localStorage,
});

// sessionStorage에 저장하고 싶은 경우
// Next.js를 쓴다면 sessionStorage는 아래와 같이 따로 설정 필요**
const sessionStorage = 
      typeof window !== 'undefined' ? window.sessionStorage : undefined

const { persistAtom } = recoilPersist({
  key: 'key-name',
  storage: sessionStorage,
});

// Recoil-persist를 적용시키려면 아래의 effects_UNSTABLE을 적어주어야 한다.
export const userAtom = atom<userState | null>({
  key: 'myAtomKey',
  default: null,
  effects_UNSTABLE: [persistAtom],
});

reference 📒 : https://www.npmjs.com/package/recoil-persist