[HTML/CSS] "Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>." 경고 해결하기

1. 경고 문구 설명

 React를 사용하면서 "Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>."라는 경고를 본 적이 있으신가요? 이 경고는 <p> 태그 안에 <div> 태그를 넣었을 때 발생합니다. HTML 구조에서 <p> 태그는 블록 레벨 요소를 포함할 수 없기 때문에 발생하는 문제입니다.

 

https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-p-element

4.4 Grouping content — HTML5

 

2. Error가 아닌 Warning인 이유?

 HTML을 학습하면서 태그(tag)에 대하여 학습하면서 블록 태그, 인라인 태그에 대하여 들어본 적이 있을 것 입니다. 여기서 가장 중요한 개념은 인라인 태그 안에는 블록 태그를 중첩할 수 없으며, 블록 태그는 다른 블록 태그나 인라인 태그를 중첩할 수 있다는 사실입니다.

 

 하지만 블록 태그 중 p 태그만 예외 적으로 인라인 태그만 중첩할 수 있도록 설계되어 있습니다. HTML 5부터는 p 태그 안에 div와 같은 블록 태그가 중첩되어도 에러를 발생하지 않기 위하여 자동으로 태그를 닫아버리도록 되어있습니다. 경고 메세지로 분류되는 이유도 이러한 이유 때문입니다.

<p>
     p 태그에 대한 내용입니다.
     <div>div 태그에 대한 내용입니다.</div>
 </p>

 

즉, 위와 같이 작성한 경우에는 아래와 같이 브라우저가 읽게 됩니다.

<p>
	p 태그에 대한 내용입니다.
</p>
<div>div 태그에 대한 내용입니다.</div>

 

 

3. 해결 방법 및 주의 사항

 위 경고에 대한 해결 방법은 브라우저가 자동으로 처리하는 것처럼 p 태그와 자식으로 갖는 블록 태그를 분리하는 방법과 블록 태그를 중첩해야 하는 상황에서는 p 태그를 사용하지 않는 방법이 있습니다.

 

 위와 같은 패턴이 쌓이고 반복적으로 다른 페이지에도 적용될 경우에는 퍼블리싱이 깨질 가능성도 무시할 수 없습니다. 모든 브라우저에서 p 태그와 div 태그의 중첩을 인식할 수 있는 것은 아니며 개발자의 작성 의도와는 다른 코드 결과물이 나오기 때문에 주의해서 작성할 필요가 있습니다.