[React] recoil-persist 사용하여 localStorage 또는 sessionStorage에 저장하기

recoil 상태관리를 사용중이라면 로컬스토리지나 세션스토리지에 상태값을 저장하기 위해
recoil-persist를 설치하여 담을 수가 있다.

📍localStorage

• 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)
  단, 동일한 브라우저를 사용할 때만 해당
• 지속적으로 필요한 데이터 저장 (자동 로그인 등)

📍sessionStorage

• 데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
• 일시적으로 필요한 데이터 저장 (일회성 로그인 정보, 입력폼 저장 등)

---

🌀 recoil-persist 설치

npm install recoil recoil-persist 

🗂 localStorage에 저장하는 법

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


const { persistAtom } = recoilPersist({
  key: "localStorage", // 고유한 key 값
  storage: localStorage,
})


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

🗂 sessionStorage에 저장하는 법

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


const { persistAtom } = recoilPersist({
  key: "sessionStorage", // 고유한 key 값
  storage: sessionStorage,
})

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

적용 완료 ~.~