[React] JSX 내 table 작성법 : thead, tbody 필수

 

 

💡 jsx 에서 테이블을 만들어보자!

 

<table>
  <tr>
    <th>title</th>
    <th>contents</th>
  </tr>
  {todos.map((todo: Todo) => {
    return (
      <tr key={todo.id}>
        <td>{todo.title}</td>
        <td>{todo.contents}</td>
      </tr>
    );
  })}
</table>

 

화면엔 잘 나오는데 에러가 떠서 🥲

찾아보니 HTML 에서의 table 은 tbody, thead 를 생략해도 tr/td, th 를 쓸 수 있지만

JSX 에선 반드시 tbody & thead 를 써줘야된다고 한다!

DOM tree 가 잘 렌더되도록 더 안전하게 구분을 해 두는 것 같다.

 

<table>
  <thead>
    <tr>
      <th>title</th>
      <th>contents</th>
  	</tr>
  </thead>
  <tbody>
    {todos.map((todo: Todo) => {
      return (
        <tr key={todo.id}>
          <td>{todo.title}</td>
          <td>{todo.contents}</td>
        </tr>
      );
  	})}
  </tbody>
</table>

🤤

 

 

🔗 https://velog.io/@dongdong98/React-Table-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%A3%BC%EC%9D%98%EC%A0%90

React - Table 사용시 주의점