React

HTML table, tr, td 태그 쓰기, JSX에서 table 태그 쓰기, Warning: validateDOMNesting(...): <table> cannot appear as a child of <table>

Asset Type
ReactJS
HTML
File Type
When to use
2021/05/17
Created by
Last edited time
2022/05/05 13:04
Reference
Reference2
이와 같이 Warning: validateDOMNesting(...): <table> cannot appear as a child of <table>
라는 에러가 나타나서 구글링을 해보니 지금은 html 태그를 리액트의 jsx 문법으로 옮겨서 적용하는 중이였는데 table 태그를 사용하기 위해서는 table 태그의 내부에 <thead>와 <tbody>를 선언해주고 그 내부에 <tr>, <td> 태그를 사용해야만 한다는 사실을 알 수 있었다. th를 사용하기 위해서는 thead를 선언해야 한다. 리액트가 rerendering을 진행할 때 DOM tree가 예상과 달리 진행될 수 있어 작성해야 한다고 한다.