[error] `Warning: validateDOMNesting(...):...

❗ 에러상황

프로젝트의 관리자페이지를 만들던 중 다음과 같은 오류를 만남.

 

 

✅ 해결방안

찾아보니 React에서 Table을 사용 시 주의점이 있었다.

• jsx에서  tbody와 thead 반드시 써주기.

 

HTML에서는 tbody를 생략하고 tr과 td를 사용할 수 있으나,

JSX에서는 tbody를 선언해야 tr과 td를 사용할 수 있고, thead를 작성해야 th를 사용할 수 있다.

React가 rerender를 진행할 때, DOM tree가 예상과는 달리 진행될 수 있어 그런 것 같다.

 

참고.

https://github.com/facebook/react/issues/5652

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> · Issue #5652 · facebook/react