[React.js] Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>

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.     at tr     at table     at div     at div     at Information (http://localhost:3000/main.f8aa81041ea5266af521.hot-update.js:33:3)     at div     at App (http://localhost:3000/static/js/main.chunk.js:171:94) console.

브라우저에는 <tbody> 태그가 필요하다. 코드에 없으면 브라우저에서 자동으로 삽입하는데, 이 것은 첫 번째 랜더링에서는 잘 동작하지만 테이블이 업데이트되면 DOM tree가 React에서 예상하는 것과 다르다. 이 경우 버그가 발생할 수 있으므로 React는 <tbody>를 삽입하라고 경고한다.

 

따라서 기존의 <table><tr></tr></table> 구조에 아래와 같이 <tbody> 태그를 추가하면 경고문이 사라진다.

<table>
	<tbody>
		<tr><td></td></tr>
	</tbody>
</table>

 

 

 

참고 자료 :

Warning: validateDOMNesting(...): cannot appear as a child of