문제

사이드 프로젝트로 열코하던 중에, 작동은 잘 되지만 warning이 뜬 이슈가 있었다.

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

<p>태그 안에 <p>태그가 자손으로 들어갈 수 없다는 뜻!

내 코드는 대충, 이런 구성이였는데

<div>
  <p>
    <p>...</p> // 바로 이 부분에서 warning 발생!
  </p>  
</div>

인라인레벨 태그안에 블록레벨 태그가 들어가면 안된다는 것은 알았지만,
블록레벨 태그인 <p>태그 안에 another <p>태그가 또 들어가면 안된다고?!

일단은 알겠는데, 이유를 찾아봐야 겠어서 구글링을 해보았다.
아무래도 HTML standard 관련 이유 같다.

이유

<p>태그는 기본적으로 문단(paragraph)을 정의하는 태그이다.
문단의 시작과 끝을 정한다.

HTML 규격상, <p>태그 내에 또 다른 <p>태그가 금지되어 있다.
웹 브라우저가 렌더링할 때, 중첩된 <p>는 뒤로 빼서 렌더링하게 된다.

예를 들어, 아래처럼 코딩하더라도

<p>
 <span>안녕하세요</span>
 <p>문단</p>
</p>

👇🏻 렌더링은, 웹 브라우저의 처리 기준에 맞춰 이런 코드로 자동보정된다.

<p>
 <span>안녕하세요</span>
</p>
<p>문단</p>

중첩되지 말아야 할 태그가 나오면, 앞서 나온 <p>를 닫아버리고, 중첩된 <p>태그를 뒤로 빼버리는 것이다.

그렇기 때문에, 레이아웃과 스타일링이 예상치 않게 깨질 수 있게 된다.
그러므로 <p>태그 내에는 인라인레벨 요소나 텍스트만 포함시키는 것이 좋다.
보기에 코드가 잘 작동하더라도, 방치하지말고 바로 수정해주도록 하자!

내 코드도 아래와 같이 수정했더니, warning이 해결되었다. 😇

<div>
  <p>
    <span>...</span> // 해결!
  </p>  
</div>

Reference

https://blogpack.tistory.com/996