[Recoil] 새로고침 후에도 데이터를 유지하려면? (recoil-persist)

 

 

recoil을 사용할 때, 새로 고침 시 데이터가 초기화 되어버린다.

새로 고침 후에도 데이터를 유지하는 라이브러리를 서칭 후 적용해 보았다.

 

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

recoil-persist

 

 

 

 

사용법은 매우 간단하다.

 

 

 

1. 라이브러리 설치

npm install recoil-persist

yarn add recoil-persist

 

 

2. recoil 파일에서 recoilPersist를 import 후, persistAtom을 선언한다.

+ import { recoilPersist } from 'recoil-persist'
+ const { persistAtom } = recoilPersist()

 

 

3. 새로고침 후에도 유지되었으면 하는 atom에 해당 코드를 추가한다.

const counterState = atom({
  key: 'count',
  default: 0,
+ effects_UNSTABLE: [persistAtom],
})

 

 

 

 

localStorage에 해당 데이터가 저장되기 때문에 개인 정보 등 민감한 데이터에서의 사용은 지양하는 것이 좋겠다.