전역상태 관리 라이브러리 recoil
recoil를 사용해서 프로젝트를 구성하는 중에 로그인의 상태를 유지해야하는 상황이 발생했다. 기존 recoil을 사용하면, 값이 변경이 되긴 하지만, 새로고침을 하면 다시 default값으로 초기화 되는 문제가 발생했다.
recoil-persist
를 사용해서 구현해 보기로 했다.
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함수를 사용해서 문제를 해결할 수 있었다.