[React 오류] validateDOMNesting(...): <tr> cannot appear as a child of <div> -React 에서 Table 사용 시 오류

validateDOMNesting(...): <tr> cannot appear as a child of <div>

오류는 calendar를 만들때 생겼는데 

<div>의 자식으로 <tr>이 올 수 없다 는 경고였다.

 

---

📌 상황

const DayViewTR = () => {
  return (
    <DayViewTRDiv>
      <DayViewTD>일</DayViewTD>
      <DayViewTD>월</DayViewTD>
      <DayViewTD>화</DayViewTD>
      <DayViewTD>수</DayViewTD>
      <DayViewTD>목</DayViewTD>
      <DayViewTD>금</DayViewTD>
      <DayViewTD>토</DayViewTD>
    </DayViewTRDiv>
  );
};

const DayViewTRDiv = styled.tr`
 
`;
const DayViewTD = styled.td`

`;

보면 table 선언 없이 

<tr> 과 <td> 태그를 사용했다.

 

찾아보니 React의 jsx 문법에서는 table, tbody, thead 를 반드시 써서 table을 사용해야 한다고 한다.

 

td, tr : tbody로 감쌈

th : thead 로 감쌈 

<table>
   <thead>
     <th> </th>
   </thead>
   <tbody>
     <tr>
       <td></td>
       <td></td>
     </tr>
   </tbody>
</table>

실제 React에서 올바르게 table을 사용하려면 위처럼 

thead, tbody, table을 잘 선언해야 한다.

 

 

---

📌해결

const DayViewTR = () => {
  return (
    <table>
      <tbody>
        <DayViewTRDiv>
          <DayViewTD>일</DayViewTD>
          <DayViewTD>월</DayViewTD>
          <DayViewTD>화</DayViewTD>
          <DayViewTD>수</DayViewTD>
          <DayViewTD>목</DayViewTD>
          <DayViewTD>금</DayViewTD>
          <DayViewTD>토</DayViewTD>
        </DayViewTRDiv>
      </tbody>
    </table>
  );
};

나느 thead 가 따로 필요 없었기 때문에

table 과 tbody 태그를 추가해 오류를 해결했다.