최상단 layout.tsx에는 html태그와 body 태그 필수
<html>
<body>
{/* 헤더 푸터 커스텀 해야함 */}
<Header />
<main>
<RecoilRootProvider>{children}</RecoilRootProvider>
</main>
</body>
</html>
이렇게 수정
nextjs 에서는 로컬스토리지 사용할 때는 괜찮은데 세션스토리지 쓰려면 접근이 불가해서 에러 뜸
[hydration] 브라우저 저장소와 Next.js의 렌더링 원리
이거 참고하면 취향에 따라 설정할 수 있음
redux를 쓸 때보다 설정에 시간이 많이 안들어서 좋았음
그냥 atom 정의할 때 옵션만 추가해주면 됨 → 이걸 모듈화 시켜서 공통으로 먹일 수 있으면 베스트인데 일단 전역적으로 관리하는 상태가 user 정보밖에 없어서 필요하면 적용할 예정
설정에 참고한 링크 : https://velog.io/@hyeone999/Recoil-Recoil-persist
단순히 recoil 상태값의 isLogin 이 true일 때 profile 버튼이 뜨게 했는데 새로고침 하면 서버가 초기에 그리는 html과 클라이언트 사이드로 넘어와서 랜더링 하는 페이지가 달라서 에러 뜸
useEffect(() => {
console.log('user >>>>', user);
user.isLogin ? setIsLogin(true) : setIsLogin(false);
}, [userState]); // recoil
state 를 하나 만들어서 csr로 돌릴 수 있게 함
새로고침 하면 정상적으로 profile로 바뀌긴 하는데 약간 딜레이가 걸리는거 같아서 이거 어떻게 해결해야 할지 생각해봐야 할듯..!!