[React] <input> cannot appear as a child of <table>. 에러

<input> cannot appear as a child of <table>. Error 발생

Warning: validateDOMNesting(...): <input> cannot appear as a child of <table>.

 

 

React 프로젝트를 진행 중에 발생하는 Error입니다.이는 Chrome의 개발자 도구인 Console에서 확인할 수 있는 Error로써 스크립트 오류로 확인할 수 있습니다.이는 <table> 태그 안에 <input> 태그가 들어가면 안 된다는 스크립트 오류입니다.(<table> 자식으로 <input>가 올수 없다는 경고)그리고 React의 JSX에서 Table를 쓸때에는 유의해야 할 부분이 있습니다.React의 JSX 사용시 반드시 tbody와 thead를 써야 하며 tbody를 선언해야만 tr과 td를 사용할 수 있습니다. 그리고 thead를 작성해야만 th를 사용할 수 있습니다.

 

따라서 React에서 table를 올바르게 사용하려면 thead와 tbody를 잘 선언해야 하며 속성 안에는 다른 태그를 넣어서는 안 됩니다.