recoil-persist

전역상태 관리 라이브러리 recoil

문제상황

recoil를 사용해서 프로젝트를 구성하는 중에 로그인의 상태를 유지해야하는 상황이 발생했다. 기존 recoil을 사용하면, 값이 변경이 되긴 하지만, 새로고침을 하면 다시 default값으로 초기화 되는 문제가 발생했다.

문제해결

recoil-persist를 사용해서 구현해 보기로 했다.

install

npm install -s recoil-persist

적용

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

const { persistAtom } = recoilPersist();

export const LoginStateAtom = atom({
  key: 'loginState',
  default: false,
  effects_UNSTABLE: [persistAtom],
});

두 가지 true와 false값으로 잘 유지를 시켰다.

적용중 발견된 문제

문제는 nextjs환경에서는 hydration 에러가 발생한다는 것...
아마 기본적으로 localStorage에 값을 저장해서 상태를 관리하는 방식을 가지고있는 recoil-persist이기 때문에 window객체를 사용했기 때문에 발생하는 에러라고 생각했다.

해결쓰

공식문서
공식문서를 참고해서 해결했다.

import dynamic from 'next/dynamic'
 
const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })
 
export default function Page() {
  return (
    <div>
      <NoSSR />
    </div>
  )
}

_app.tsx파일에 dynamic함수를 사용해서 문제를 해결할 수 있었다.