[React] Recoil-persist 사용하여 localStorage와 sessionStorage에 저장하기

Recoil-persist 사용이유

새로고침 시에도 데이터가 날아가지 않게 관리를 해주어야 할 때가 옵니다.

 

주로 사용자가 로그인한 상태에서 새로고침을하면 사용자의 로그인 정보 데이터가 날아가게 되는 곤란한 상황이 발생합니다.

 

이를 해결하는 방법이 localStorage또는 sessionStorage에 저장하는 겁니다.

 

localStorage : 로컬에 도메인별로 지속되는 storage (브라우저를 닫아도 사라지지 않음)

sessionStorage : 세션이(탭, 브라우저)가 종료될 때까지 지속되는 storage (브라우저를 닫으면 사라짐)

---

Recoil-persist 설치방법

npm install recoil recoil-persist    

---

Recoil-persist 사용하는 법

예시로 사용자의 MBTI 결과 데이터를 스토리지에 저장하는 것을 보여드리겠습니다.

localStorage에 저장하는 법

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


const { persistAtom } = recoilPersist({
  key: "localStorage", //원하는 key 값 입력
  storage: localStorage,
})
// const { persistAtom } = recoilPersist() 이렇게 사용해도 기본 값으로 localStorage에 저장됩니다.


export const mbtiState = atom({
  key: "mbtiState",
  default: [],
  effects_UNSTABLE: [persistAtom]
})

아래를 보면 Local Storage에 잘 저장된 것을 볼 수 있습니다.

---

sessionStorage에 저장하는 법

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


const { persistAtom } = recoilPersist({
  key: "sessionStorage", //원하는 key 값 입력
  storage: sessionStorage,
})

export const mbtiState = atom({
  key: "mbtiState",
  default: [],
  effects_UNSTABLE: [persistAtom]
})

아래를 보면 Session Storage에 잘 저장된 것을 볼 수 있습니다.