[React] Recoil-persist

서론

Recoil은 React에서 지원하는 강력한 전역상태 관리 라이브러리이다.

https://medium-ryan.tistory.com/34

[React] Recoil 사용후기

 

Recoil을 사용하면서 LocalStorage에 쉽게 상태를 담을 수 있게 도와주는 Recoil-persist 라이브러리의 아주 간단한 사용후기를 써본다.

---

설치 

npm i recoil-persist

//or

yarn add recoil-persist

---

원하는 상태에 persistAtom 추가

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

export const countState = atom({
  key: 'count_state',
  default: 0,
  effects_UNSTABLE: [persistAtom],
})

 

이상.

추가 작업은 불필요하다. 간단 그 자체이다.

---

SessionStorage를 사용하고 싶을 때

import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist({
  key: 'recoil-persist', // this key is using to store data in local storage
  storage: localStorage, // configure which storage will be used to store the data
  converter: JSON // configure how values will be serialized/deserialized in storage
})

 

위의 코드는 recoil-persist 공식문서에서 발췌했다.

[ storage : localStorage ]부분을 [ storage : sessionStorage ]로 변경하면 세션 스토리지로 이용이 가능해진다.

---

결론

라이브러리를 설치 후 원하는 상태값 안에 effects_UNSTABLE: [persistAtom] 속성만 넣어주면 된다.

기존의 JS 문법인 JSON.parse(), JSON.stringify()이 모두 내장되어 있어서 복잡하고 긴 코드를 짜지 않아도 된다.

Recoil-persist를 사용할 수 있다는 점에서 Recoil의 장점이 하나 더 늘어난 셈이다.

---

참고

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

recoil-persist