[React]localstorage 필요없다! recoil-persist쓰자!!

 

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

recoil-persist

Package for recoil to persist and rehydrate store. Latest version: 4.2.0, last published: 12 days ago. Start using recoil-persist in your project by running `npm i recoil-persist`. There are 4 other projects in the npm registry using recoil-persist.

www.npmjs.com

 

 

recoil-persist에 대해 배워보겠습니다.

바닐라 js에서 연습을 할 때 storage를 많이 사용하는데 json화 시키고 저장하고 불러오고

정말 귀찮죠 코드 3줄로 react에서 localstorage 를 사용할 수 있는 recoil-persist가 있습니다.

일단 설치는

npm i recoil-persist

 

 

명령어 실행 시켜주시고

recoil 모듈을 이용해서 만든 atom으로 가줍니다.

export const todoAtom = atom<IAtomTodo[]>({ key: "toDo", default: [] });

 

이렇게 atom 객체가 있습니다.

여기서 recoilpersist를 사용해줄껀데요 일단 import 해주시고요.

import {recoilPersist} from "recoil-persist"

 

 

recoilpersist를 만들어 줍니다.

import {recoilPersist} from "recoil-persist" 
const {persistAtom} = recoilPersist({ 
  key: "To_Do", 
  storage : localStorage, 
})

 

key 값은 localStorage에 저장될 key값을 얘기합니다.

여기서 atom에다가 하나를 추가해줍니다.

export const todoAtom = atom<IAtomTodo[]>({ 
  key: "toDo", 
  default: [], 
  effects_UNSTABLE: [persistAtom] 
});

 

 

저 코드를 한줄만 추가해주시면

이제 알아서 localstorage에 저장을 하고 불러오고 삭제시키면

그대로 localstorage에서도 삭제되는 신기한 마법을 볼 수 있습니다.