Recoil 새로고침 랜더링 문제

문제

이번 프로젝트에서 user 정보를 관리하기 위해 recoil 전역상태관리 라이브러리를 사용하였다.

recoil를 사용하여 user 정보를 프로필페이지에서 볼 수 있었는데 새로고침시 값이 초기화되는 문제가 있었다.

 

문제 화면

문제가 발생한 원인은 다음과 같았다.

recoil로 관리하는 상태는 클라이언트 사이드에서만 유지되므로, 페이지를 새로고침하면 서버 측에서 초기 상태를 가져와서 다시 렌더링하기 때문에 recoil 상태가 초기화된다.

쉽게 말해, 새로고침 시에 페리지가 렌더링 되면서 recoil 상태도 같이 초기화 된다는 말이다.

해결 방법

이를 해결하는 방법은 관련 라이브러리 recoil-persist 라이브러리를 사용하여 storage에 저장하는 것이다.

이는 storage에 저장하여 새로고침에도 기존에 있던 값으로 덮어씌우는 역할을 한다.

1. recoil-persist 라이브러리 설치

yarn add recoil-persist

2. atom 파일에서 storage에 저장

여기서 고민한했던 것은 localStorage, sessionStorage 중 어떤걸 이용하면 좋을까 고민했다.

user 정보가 사용자가 브라우저를 닫았다가 다시 열어도 로그인이 유지되어야 했기에 localStorage를 선택하였다.

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";
// types
import { UserDto } from "../types/data/user";

const { persistAtom } = recoilPersist({
  key: "localStorage",
  storage: localStorage,
});

export const userState = atom<UserDto | null>({
  key: "userState",
  default: null,
  effects_UNSTABLE: [persistAtom],
});

결과

문제 해결 화면

새로고침하여도 user 정보가 초기화되지 않고 localStorage에 저장되는 것을 볼 수 있다.