[Recoil] 새로고침해도 유지되는 state_Recoil Persist

결제 기능을 구현하는 과정에서 결제창이 넘어가며 state가 초기화되어 결제 승인 페이지에 도착하기 전에 사용자가 입력한 예약 정보가 모두 날아가는 문제가 발생했다. 그래서 사용자가 입력한 예약 정보를 임시로 저장하기 위해 Recoil Persist 기능을 이용하여 구현했다.

 

Recoil Persist란?

• Recoil과 함께 사용할 수 있는 별도의 라이브러리로, Recoil로 생성한 global state를 localStorage 혹은 sessionStorage에 저장하여 새로고침해도 state가 유지되도록 사용할 수 있다.
• 기존 Recoil 사용 방법과 동일하게 useRecoilState 등의 훅을 이용하여 쉽게 Storage에 상태를 저장할 수 있다.

 

Recoil Persist 사용 방법

npm install recoil-persist

라이브러리를 설치한다.

 

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

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

// [방법 2] key도 따로 설정하고 sessionStorage에 저장하고 싶은 경우
const { persistAtom } = recoilPersist({
  key: 'persistAtomKey',
  storage: sessionStorage,
});

// Recoil-persist를 사용하기 위해 effects_UNSTABLE 속성을 추가해야 한다.
const userNameState = atom({
  key: 'userName',
  default: '',
  effects_UNSTABLE: [persistAtom], 
})

recoil-persist를 사용하기 위해서는 atom에 effects_UNSTABLE: [persistAtom] 속성을 추가해야 한다.

 

const sessionStorage =
  typeof window !== 'undefined' ? window.sessionStorage : undefined;

Error occurred prerendering page "/reservation". ReferenceError: sessionStorage is not defined

추가적으로 Next.js에서 Recoil-Persist를 사용하는 경우에는 storage 변수를 따로 선언해 주어야 한다. 아니면 build 과정에서 다음과 같은 에러 메시지를 마주하게 된다. 이는 Next.js가 기본적으로 SSR을 사용하는데, localStorage와 sessionStorage는 SSR에서 사용할 수 없는 객체인 window에 접근하므로 발생한다고 한다.

 

 

const setName = useSetRecoilState(userNameState);
...
<input onChange={(e) => setName(e.target.value)} />

실제로 sessionStorage에 state를 저장하고 싶을 때는 setState를 하며 된다.

 

 

---

참고 문서

recoil-persist

[Web] Recoil-persist 사용해보기, sessionStorage에 저장하기