탄스택 쿼리 트러블 슈팅
이번엔 꽤 무수한 빨간 거를 봤다.
뭔 소리인지 오류가 난 곳 경로를 파악하긴 어렵지만 html 쪽이랑 div 문제... reactQueryDevtools 문제인 거 같아서 레이아웃으로 가서...
오류 1)
In HTML,
cannot be a child of . This will cause a hydration error.
코드 확인
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Providers>
<body className={inter.className}>{children}</body>
</Providers>
</html>
);음 아주 쿨하게 Providers 를 넣은 모습 (*탄스택 쿼리다) html 바로 밑에 넣은 건 좋은 생각이 아니었던 듯 해서 수정하기
오히려 아예 밖으로 빼볼까? (이전에 메인에서 적용했던 경험 삼아..) 했다가 여전히 오류가 있어서(아마 바로 children을 받지 않아 생기는 문제이지 않을까 그냥 혼자 생각하는 중...), 이렇게 바꿔봤다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>{children} </Providers>
</body>
</html>
);
}오류가 사라졌다.
이로 인하여 배운 것은 html 태그와 body 태그가 직접적인 부모-자식 관계를 유지해야 한다는 것.
오류2) Warning: Extra attributes from the server: class
오류3) 프롭스 전달
const PokemonDetailPage = () => {
const router = useRouter();
const { id } = router.query;
return <><PokemonDetail( id : {id: string;}) /></>;
};안 된단다,,,
10시 반에 와서 다시 쓰기
🐕발쟈