[Node.js][TestAutomationPlatform][React] Table 태그 생성시 validateDOMNesting 오류

안녕하세요 깍돌이입니다.

 

이제는 FE 쪽 간단한 개발을 위해서 Table 태그를 이용한 TASK 상태를 그려줄 화면을 만들어야하는데요

 

React 에서 해당 table을 만들게 되면 위와같은 warning이 나타납니다.(노랑색도 아니고 빨간색이라 오류로 보고 처리하는게 나을거 같습니다.)

 

 <div>
    <table>
      <colgroup>
        <col width="100px"/>
        <col width="*"/>
        <col width="90px"/>
        <col width="160px"/>
        <col width="120px"/>
        <col width="50px"/>
        <col width="50px"/>
      </colgroup>
      <thead>
          <th>UUID</th>
          <th>TESTNO</th>
          <th>TASK</th>
          <th>TASKSTATUS</th>
          <th>TESTRESULT</th>
          <th>START</th>
          <th>FINISH</th>
      </thead>
      <tbody>
        <tr>
          <td>test-1234-sddf-4321</td>
          <td>1</td>
          <td>할당 및 접속 테스트</td>
          <td>WAIT</td>
          <td>FAIL</td>
          <td>5분전</td>
          <td>2분전</td>
        </tr>
      </tbody>
    </table>
  </div>

위와같이 하였을때 일반 페이지에서는 오류가 발생하지 않지만 React 에서는 해당 태그의 구조는 오류가 발생합니다.

 

validateDOMNesting(...) <th> cannot appear as a child of <thead>

직역을 하자면 th는 thead의 자식으로 나타날수 없다 라는 뜻이 되는데요 간단하게 처리하자면

 

 <div>
    <table>
      <colgroup>
        <col width="100px"/>
        <col width="*"/>
        <col width="90px"/>
        <col width="160px"/>
        <col width="120px"/>
        <col width="50px"/>
        <col width="50px"/>
      </colgroup>
      <thead>

         <tr>
          <th>UUID</th>
          <th>TESTNO</th>
          <th>TASK</th>
          <th>TASKSTATUS</th>
          <th>TESTRESULT</th>
          <th>START</th>
          <th>FINISH</th>

         </tr>
      </thead>
      <tbody>
        <tr>
          <td>test-1234-sddf-4321</td>
          <td>1</td>
          <td>할당 및 접속 테스트</td>
          <td>WAIT</td>
          <td>FAIL</td>
          <td>5분전</td>
          <td>2분전</td>
        </tr>
      </tbody>
    </table>
  </div>

 

th 부분을 tr로 묵어 주면 됩니다.