[리액트 에러 React Error] Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> 해결

 

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트로 개발하다가 만날 수 있는 에러의 해결 방법에 대해 다루겠습니다.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

 

해당 에러를 번역하면 이렇습니다.

경고: validateDOMNesting(...): <div>는 <p>의 하위 항목으로 나타날 수 없습니다

 

이 에러는 리액트 개발에 사용하는 jsx에서 발생하는데요.

즉, <p> 태그 안에 <div>를 썼거나

<p> 태그 안에 또 <p> 태그를 썼을 때 해당 에러가 발생하게 됩니다.

이 경우 저는 elements를 감싸고 있는 <p> 태그를 찾아서 <div> 태그로 변경해주었더니 해결됐습니다.