[Next.js] 테이블(table) 렌더링 시 하이드레이션(Hydration) 에러

에러 발생

Next.js에서 테이블 렌더링 시 다음 에러가 발생했습니다.

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

음.. 전에 봤던 하이드레이션 에러인데 이번엔 왜나는걸까!!

문제가 되는 코드는 아래와 같습니다.

<table>
  ...
  {rows.map((pairs, i) => (
        <tr key={i}>
            {pairs.map(({ key, value }) => (
                <React.Fragment key={key}>
                    <td className={'label'}>{key}</td>
                    <td>{value}</td>
                </React.Fragment>
            ))}
        </tr>
    ))}
</table>

코드를 사용하여 <tr> 요소를 그려주었을 뿐이었죠..

해결

해결 방법은 굉장히 간단했습니다.
https://github.com/vercel/next.js/discussions/36754

<tr>의 배열을 <tbody>안에 넣어주면 해결되었습니다!

<table>
  ...
  <tbody>
  {rows.map((pairs, i) => (
        <tr key={i}>
            {pairs.map(({ key, value }) => (
                <React.Fragment key={key}>
                    <td className={'label'}>{key}</td>
                    <td>{value}</td>
                </React.Fragment>
            ))}
        </tr>
    ))}
    </tbody>
</table>