🪄Recoil을 사용하다가...

우선, Recoil은 Redux, MobX와 같이 React의 전역 상태 관리 라이브러리 중 하나입니다!

최근에 CONNECTHON 프로젝트를 진행하면서 알게 된 라이브러리인데, Docs를 보자마자 이전에 사용했던 Redux와는 달리 상당히 코드가 간결하고 REACTISH 해서 얼른 써보고 싶었습니다!

그래서 가벼운 프로젝트에 전역 상태 관리를 하기에 러닝 커브가 다른 것보단 현저히 낮을 것 같아 Recoil을 채택!

☠️전역상태가 새로고침하면 증발해요

로그인을 구현하다가, 백엔드에서 token을 넘겨주면 그걸 Recoil state로 넣어 다니는 방식으로 유저 정보를 가지고 다니는 방식으로 방향을 정했습니다!

그래서 백엔드에서 넘어온 res를 받고, 가공해서 Recoil state로 설정해주었는데, 문제는 페이지를 새로고침하면 나의 Recoil State가 증발한다는 것이었습니다ㅜ
(+이번에 백엔드에서는 현재 로그인되어있는 유저정보를 불러오는 API가 없어서 이걸 계속 가지고다닐 수 있는 방법을 생각해내야했다!)

구글링을 해보니 나랑 똑같은 문제를 겪는 사람들이 엄청 많았고, 생각보다 손쉽게(?) 해결방법을 얻을 수 있었다. 바로바로-! Recoil-persist 라이브러리를 사용하는 것!
(Redux를 쓸 때는 몰랐는데 지금 보니까 Redux-persist라는 라이브러리도 있네요!)

Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 날라가지 않고 sessionStorage 또는 localStorage에 보관됩니다.
아무런 설정도 해주지 않으면 key는 'recoil-persist', 저장소는 localStorage에 기본적으로 저장됩니다.

또한, Next.js를 사용하는 경우 그냥 localStorage와 sessionStorage를 사용한다면
"(local)sessionStorage is not defined"와 같은 에러가 뜨게 되므로, 추가적인 설정이 필요합니다.
이 문제는 Next.js가 기본적으로 SSR을 사용하기 때문에, localStorage와 sessionStorage는 SSR에서 사용할 수 없는 객체인 window에 접근하므로 발생합니다! 해결방법까지 아래에 주석으로 달아놓았으니 참고해주세요😀

✏️Recoil-persist 사용방법

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

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

//2. sessionStorage에 저장하고 싶은 경우
//Next.js를 쓴다면 sessionStorage는 아래와 같이 따로 설정 필요
const sessionStorage = 
      typeof window !== 'undefined' ? window.sessionStorage : undefined

const { persistAtom } = recoilPersist({
  key: '내맘대로 정하는 키 이름',
  storage: sessionStorage,
});

//Recoil-persist를 적용시키려면 아래의 effects_UNSTABLE을 적어주어야 한다.
const myAtom = atom<MyAtomType>({
  key: 'myAtomKey',
  default: myDefaultState,
  effects_UNSTABLE: [persistAtom],
});