Footer 와 pages/index.tsx에서 컴포넌트 트리가 만들어지지 못하는 에러
#169
-
|
에러메시지 토글
The above error occurred in the div component:
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
헤더를 제외한 모든 컴포넌트에서 해당 오류가 발생하는 것 같습니다.
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
해당 에러의 원인은 전역 상태의 초기화가 제대로 일어나지 않아서로 밝혀졌습니다.
서버 사이드에서 서버사이드 쿠키를 이용하여 데이터 받아오기ArtZip.getInitialProps = async (appContext: AppContext) => {
const appProps = await App.getInitialProps(appContext);
// 서버 사이드 쿠키 얻어오기
const { ctx } = appContext;
const allCookies = cookies(ctx);
const accessToken = allCookies['ACCESS_TOKEN'];
const refreshToken = allCookies['REFRESH_TOKEN'];
let userState = SIGNOUT_USER_STATE;
if (refreshToken && accessToken) {
try {
const { isAuth, data } = await authorizeFetch({
accessToken,
refreshToken,
apiURL: `${process.env.NEXT_PUBLIC_API_END_POINT}api/v1/users/me/info`,
});
userState = isAuth ? { ...data, isLoggedIn: true } : SIGNOUT_USER_STATE;
} catch (e) {
// 인증되지 않은 사용자일 경우, 서버 사이드 쿠키 삭제
ctx.res &&
ctx.res.setHeader('Set-Cookie', [
`ACCESS_TOKEN=deleted; Max-Age=0`,
`REFRESH_TOKEN=deleted; Max-Age=0`,
]);
userState = SIGNOUT_USER_STATE;
}
}
return { ...appProps, userData: userState };
};function ArtZip({ Component, pageProps, userData }: AppProps | any) {
const { pathname } = useRouter();
// Recoil 의 initialState를 set 하는 함수, 서버사이드에서 받아온 props로 set 한다.
const initialState = ({ set }: MutableSnapshot) => {
const { userId, email, nickname, profileImage } = userData;
const isLoggedIn = userId !== null;
set(userAtom, { userId, email, nickname, profileImage, isLoggedIn });
};
// 중략
return (
<RecoilRoot initializeState={initialState}>
// 중략
</RecoilRoot>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
참고 자료 : |
Beta Was this translation helpful? Give feedback.
-
|
또한 Recoil 에서는 RecoilRoot 에서 오류가 발생하면 |
Beta Was this translation helpful? Give feedback.
해당 에러의 원인은 전역 상태의 초기화가 제대로 일어나지 않아서로 밝혀졌습니다.
(RecoilRoot 에서 에러가 발생하는 경우)
app.tsx에서 서버 사이드에서 내 정보를 받아온 후,RecoilRoot의initialState에서 직접userAtom을 초기화하여 해결할 수 있습니다.서버 사이드에서 서버사이드 쿠키를 이용하여 데이터 받아오기