next js에서 프로젝트를 진행하고 있는데 npm run dev를 통해 페이지를 출력하는데 위의 사진과 같은 에러가 발생했다.
이 에러는 페이지는 출력되지만 따로 에러만 발생해서 확인할 수 있다
에러가 왜 발생했는지 자세하게 확인하기 위해 맨 밑 줄에 "See more info here: https://nextjs.org.docs.message/react-hydration-error" 부분을 확인해보자.
페이지를 확인해보면 아래와 같은 화면을 볼 수 있다.
Common Causes를 확인해보며 다양한 구글링을 통해 문제를 해결해보려 했다.
결론적으로 말하면 내가 발생한 에러는 1번에 해당하는 HTML 태그가 잘못 중첩된 경우에 해당되었다.
다른 사람들이 쓴 포스팅을 확인해보면 2번의 문제로도 발생할 수 있는 에러기 때문에 만약 내가 해결한 방법으로 에러가 해결되지 않는다면 구글링을 통해 문제를 해결하기 바랍니다.
일단 에러가 발생한 이유는 말한 것과 같이 HTML 태그가 잘못 중첩되었기 때문이었다.
내가 작성했던 코드를 통해 왜 에러가 발생했는지 확인해보자
나 같은 경우에는 페이지 내 RootLayout을 통해 구역을 나눠 작업을 진행하려고 했지만 <html> 태그 내에 <Header /> 태그와 <body> 내에 다양한 태그가 존재했다.
하지만 <Header /> 태그 내에 <h2> 태그가 존재하여 결론적으로는 <h2> 태그와 <body> 태그가 <html> 태그 내에 들어가 있었던 것이다.
이것은 페이지를 만드는데에 치명적인 오류가 있는 것은 아니지만 nextjs에서 안티 패턴으로 분류하는 작성법이기 때문에 에러가 발생했던 것이다.
따라서 이런 식으로 코드를 수정해주면 <body> 태그 안에 모든 태그가 들어가 있기 때문에 <html> 태그 내에는 <body> 태그만 존재하여 중첩이 사라지게 된다.
'React' 카테고리의 다른 글
| [React] React Hooks (0) | 2024.02.14 |
|---|---|
| [React] React의 특징 V-DOM(Virtual DOM) (0) | 2024.02.06 |
