React - Table 사용시 주의점

Table이란?

• HTML의 DOM 중 하나로 행과 열로 이루어진 표를 나타냄
• 하위 구조로 thead tbody tr td th 등이 있다.

  <table>
  <thead>
      <tr>
          <th colspan="2">The table header</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>The table body</td>
          <td>with two columns</td>
      </tr>
  </tbody>

  The table header
  The table body	with two columns

JSX에서 Table 쓰기

tbody 와 thead를 반드시 쓸것

• HTML에서의 table은 tbody를 생략하고 바로 tr과 td를 사용할 수 있다
• 그런데 JSX에서는 반드시 tbody를 선언해야 tr과 td를 사용할 수 있다

  선언하지 않은 경우 나타나는 오류

`Warning: 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`

• 마찬가지로 thead를 작성해야 th를 사용할 수 있다.
• React가 rerender를 진행할 때, DOM tree가 예상과는 달리 진행될 수 있으므로 작성을 해야하는 것이 이유이다.

참고사이트

• MDN 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/table
• Warning 관련 : https://github.com/facebook/react/issues/5652