📌 Recoil의 단점

Recoil state는 새로고침을 할 경우 증발해버린다
(이걸 여태 몰랐네..?)
OJT 과제를 부여받고 Recoil을 쓰던 중 기존에 저장해둔 state가 초기화되는 것을 보고 이게 대체 뭔가란 생각을 했다

📌 해결법

이러한 단점을 해결하기 위해 recoil-persist 라이브러리를 사용할 수 있다.
recoil-persist를 사용할 경우 새로고침해도 state가 날아가지 않고 sessionStorage나 localStorage에 저장된다.
아무 설정도 해주지 않을 경우 key는 recoil-persist, 저장소는 localStorage가 default이다.

📌 recoil-persist 사용하기

Next.js의 경우 기본적으로 SSR을 사용하는데, localStorage와 sessionStorage는 SSR에서 사용할 수 없는 객체인 window에 접근하기 때문에 문제가 발생한다.
Next.js를 사용할 경우 관련 설정을 하나 해주어야 하니 주의!

📍 install 해주기

yarn add recoil-persist 또는 npm install recoil-persist

📍 recoil 파일 설정하기

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

// 아무것도 설정하지 않고 쓰는 경우 localStorage에 저장되며, key이름은 'recoil-persist'로 저장된다.
const {persistAtom} = recoilPersist();

// sessionStorage에 저장하고 싶은 경우
// Next.js를 쓰는 경우
const sessionStorage = typeof window !== 'undefined' ? window.sessionStorage : undefined

const {persistAtom} = recoilPersist({
  key: "정하고 싶은 키 이름",
  storage: sessionStorage
});

// recoil-persist 적용
const myAtom = atom({
  key: "myAtomKey",
  default: myDefaultState,
  effects_UNSTABLE: [persistAtom]
});

<참고 : https://velog.io/@timosean/Web-Recoil-persist-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 >