[Recoil] 새로고침(refresh) 하면, state가 날아가는 현상

문제 : Recoil을 사용하면서 새로고침시 기존 정보가 초기화 되는 부분을 보완해야한다.

해결 : 새로고침해도 데이터를 유지하기 위해서 recoil-persist 라이브러리를 사용

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

recoil-persist

 

※ recoil-persist가 내부적으로는 디폴트로 localstorage에 데이터를 넣어서 활용하는 방식으로 작동하는데, 혹시 localstorage에 등록되기 민감한 정보라면 위 방법을 사용하는것에 대해 다시 한번 고려할 필요는 있을것으로 생각된다.

---

localStorage

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

localStorage에 저장하는 법

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

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

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

 

---

sessionStorage

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

sessionStorage에 저장하는 법

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

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

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