FrontEnd/React.js

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

푸고배 2021. 10. 13. 20:43

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

· Issue #5652 · facebook/react

 

Using react and react-dom v0.14.3. Have a component which renders:

Battery <st...< p=""> github.com
</st...<>

 

반응형