[React] Recoil 새로고침 시 데이터 유지하기

메인페이지에서 새로고침 시 Recoil state 에 저장해둔 토큰이 초기화되어서 API 호출 에러가 발생했다.

(아직 API 호출 에러를 핸들링 하지 않았다.)

 

리프레쉬 토큰 없이 진행하다 보니, 토큰을 보호하기 위해 로컬 스토리지에 저장하지 않고 내부 변수로 들고 있으려 했던 것인데, 지금 상태로는 새로고침 시 다시 로그인이 필요한 상황이기 때문에 사용자 경험이 좋지 않다고 판단 되었다.

 

Recoil Persist 라이브러리를 사용하면, 간단하게 필요한 변수를 로컬 스토리지에 저장시킬 수 있다.

 

 

1. recoil-persist 를 설치한다.

npm install recoil-persist

//or

yarn add recoil-persist

2. state 를 관리하는 파일에 recoil-persist를 import 한다.

//State.js

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

3. persistAtom 을 선언한다.

//State.js

const { persistAtom } = recoilPersist();

4. 로컬 스토리지에 저장되어야 하는 state에 ‘effects_UNSTABLE: [persistAtom]’ 구문을 추가한다.

//State.js

const loginState = atom({
  key: "loginState",
  default: {
    url: "url",
    isLogin: false,
    token: "",
  },
  effects_UNSTABLE: [persistAtom], //추가
});

 

적용 후 새로고침하여도 토큰이 잘 남아있어, API 호출 에러 발생하지 않는다!

 

출처