React,SpringBoot] index.js:1 Warning: validateDOMNesting(...): <h1> cannot appear as a descendant of <p>. at h1 at p at header at div at App (http://localhost:3000/main.5143fe28e33d775bbc5c.hot-update.js:37:83)

spring boot와 react를 이용해서 샘플 TodoList를 만들려고 하다가 위와 같은 경고가 발생했다.

 

해당 경고는 리액트에서 발생했고, 콘솔창에서 확인할 수 있었다.

 

<p> 태그에서 문제가 있다고 경고가 발생했고, 그 안에 h1 태그가 문제였다.

 

서버에서 데이터를 받아와서 조건부 렌더링을 하는 부분이었는데,

<p>태그는 인라인 요소인데 안에 h1 태그가 들어가 있어 오류가 발생했다.

300x250

 

h1을 감싸는 p태그를 제거하니까

 

에러가 깔끔히 사라졌다.