Recoil 새로고침 데이터 유지하기(feat. recoil-persist)

Recoil을 사용하면서 새로고침시 기존 정보가 초기화 되는 부분을 보완하기 위한 작업

새로고침해도 데이터를 유지하기 위해서 recoil-persist 라이브러리를 활용한다.

 

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

recoil-persist

 

1. npm install recoil-persist 명령어를 사용하여 해당 라이브러리를 인스톨한다.

 

2. recoil을 사용한다면 state.ts 같은 파일에 atom을 통해 state 정보를 관리하고 있을것이다.

해당 파일 위치에 가서 아래와 같이 recoil-persist를 import 해주고 persistAtom 사용을 선언해준다.

import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist();

 

3. 새로고침이 되도 유지되길 원하는 atom 정보에 아래 정보를 추가한다.

effects_UNSTABLE: [persistAtom]

 

[예시]

export const userInfo = atom<UserInfo>({
  key: 'userInfo',
  default: {
    userId: '',
    userName: '',
  },
  effects_UNSTABLE: [persistAtom],
});

 

위처럼 atom 정보에 한줄 추가해놓으면 끝난다.

 

이제 새로고침을 해도 기존 정보가 유지되는 것을 확인할 수 있을 것이다.

 

---

※ recoil-persist가 내부적으로는 localstorage에 데이터를 넣어서 활용하는 방식으로 작동하는데,

    혹시 localstorage에 등록되기 민감한 정보라면 위 방법을 사용하는것에 대해

    다시 한번 고려할 필요는 있을것으로 생각된다.

 

추천글

Recoil 사용하기