[React] Recoil-persist 사용해보기

Recoil을 사용하다가 전역상태가 새로고침 하면 초기화되는 현상이 발생했다. 구글링을 해보니 나랑 똑같은 문제를 겪는 사람들이 많았고, 생각보다 쉽게 해결방법을 얻을 수 있었다. 바로 Recoil-persist 라이브러리를 사용하면 된다.

 

Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 날아가지고 않고 sessionStorage 또는 localStorage에 보관된다. 아무런 설정도 해주지 않으면 key는 "recoil-persist", 저장소는 localStorage에 기본적으로 저장된다.

 

✅ Recoil-persist 사용방법

설치

npm i recoil-persist

 

사용법

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

//1. 아무것도 설정 안 하고 쓰는 경우
//localStorage에 저장되며, key 이름은 'recoil-persist'로 저장됨
const { persistAtom } = recoilPersist();

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

const { persistAtom } = recoilPersist({
  key: '내맘대로 정하는 키 이름',
  storage: sessionStorage,
});

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