React recoil-persist 사용하기

리액트를 사용하면서 전역 상태 관리 라이브러리 중 하나인 recoil에도 사이트를 새로고침해도 전역 값을 유지시킬 수 있는 방법이 있다. recoil-persist 라는 패키지인데 사용법 또한 매우 간단하다. 

 

이 recoil-persist 가 값을 유지하는 원리는 간단한데 로컬 스토리지 혹은 세션스토리지에 담아서 저장하는 것이다. 

 

npmjs 링크

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

 

npm i recoil-persist

설치 해 준 뒤

 

import { atom } from "recoil";

export const isHeaderShow = atom<boolean>({
  key: 'isHeaderShow',
  default: true,
});

위의 코드가 일반 기본적으로 사용하던 recoil 스테이트 값이었다고 치면

 

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

const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // -> 로컬스토리지에 담길 키 값 네임 
  storage: localStorage, // -> 저장할 위치 디폴트가 로컬이고 session에다가도 저장할 수 있는 것으로 안다
});

export const userAuthToken:any = atom<string>({ //-> 다 똑같다
  key: 'userAuthToken',
  default: '',
  effects_UNSTABLE: [persistAtom], //-> 요거 추가
});

 

이렇게 사용해주면 새로고침 해도 값들이 그대로 잘 있는것을 확인할 수 있다.