[Recoil] Recoil persist 사용법

✅ 왜 사용하는가?

Recoil을 사용해 칸반보드를 만드는 프로젝트를 진행중이었다.

atom 데이터를 LocalStorage로 저장해

브라우저를 닫거나 새로고침을 해도 데이터가 유지될 수 있게 구현하고 싶었다.

 

 

1️⃣ 초기 해결방법

atom.ts 파일에서 직접 LocalStorage를 연결했다.

데이터 수정이 있을 때 마다 LocalStorage에 setItem을 해줬다.

 

const initData = localStorage.getItem('to-do');

export const boardState = atom<IBoard[]>({
  key: 'boards',
  default: [],
  default: initData ? JSON.parse(initData) : [],
});

 

 

그런데 Kanban board 특성상 추가, 삭제, 수정이 매우 잦고

내 코드를 보니 setItem 코드만 6줄 이상 반복됐다.

 

state 변경시 자동으로 recoil이 LocalStorage에 저장해줬으면 좋겠다는 생각을 하게됐다.

 

그렇게 Recoil Persist를 알게됐다!

 

 

 

2️⃣ Recoil-Persist 추가

npm i recoil-persist

 

나는 기존에 recoil을 사용하고 있어서 recoil 설치와 관련된 과정은 추가하지 않았다.

 

먼저, atom.ts파일에서 recoilPersist를 연결해줬다.

 

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';


const { persistAtom } = recoilPersist({
  key: 'to-do', // local storage에 저장할 key값
  storage: localStorage, // localStorage or sessionStorage
});

export const boardState = atom<IBoard[]>({
  key: 'boards', 
  default: [],
  effects_UNSTABLE: [persistAtom], // 필수
});

 

이후 setItem 코드들을 모두 지워줬다.

 

처음엔 default 값에 localStorage의 초기 데이터를 불러와야 하는 줄 알고 localStorage.getItem() 을 했었는데,

오히려 저장이 제대로 되지 않았다. 

 

빈 배열로 남겨두어도 localStorage에 해당 key값의 데이터가 있으면 알아서 불러온다. 

 

 

💡 

사실 setItem을 3번째 작성하고 있을 때 쯤 부터, 왜 이 코드들을 반복적으로 작성해야하지? recoil이 해줬으면 좋겠다 라고 생각은 했는데 나만 불편한게 아니었던 것 같다.

 

있을 법한 것들은 역시 다 라이브러리에 있다!!!!!!!!!!

 

몸이 고생하기 전에 뇌에 힘줘!!!!!!!