[리액트 next.js 테이블 에러] Expected server HTML to contain a matching <tr> in <table>

# Next.js에서 React로 table 생성시 에러 해결 방법

- 문제 현상

Next.js 환경에서 React로 <table> 생성시, 아래와 같은 에러가 발생할 수 있다.

 

Expected server HTML to contain a matching <tr> in <table>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

There was an error while hydrating this Suspense boundary. Switched to client rendering.

 

- 해결 방법

table에서 제목 영역은 thead 태그로, 내용 영역은 tbody 태그로 감싸주면 된다.

<table>
  <thead>
    <tr>
      <th>제목1</th>
      <th>제목2</th>
      <th>제목3</th>
      <th>제목4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
      <td>내용4</td>
    </tr>
  </tbody>
</table>