[React] recoil-persist (atom state Storage 자동저장)

recoil-persist
: Recoil Atom으로 state를 이용하는 app에서 자동으로 Storage에 state를 저장할 수 있다.

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

0. install
   npm install recoil-persist

1. atom.ts파일에서 recoilPersist import 후, 저장할 storage 및 key 정의

// atom.ts

import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist({
  key: "trelloBoardLocal", // 중복되지 않도록 주의
  storage: localStorage,
});

*storage에 저장 되는 key값이 중복되지 않도록 주의

2. 자동 저장 할 atom state에 effects_UNSTABLE 추가

// atom.ts

export const ToggleThemeAtom = atom<boolean>({
  key: "toggleTheme",
  default: true,
  effects_UNSTABLE: [persistAtom],
});

3. F12 > 애플리케이션 > (설정한)storage에서 key값 하위에 저장 된 state 확인 가능

키 : trelloBoardLocal
값 : {"toggleTheme":false}