Warning: In HTML, ‹div> cannot be a descendant of <p›. 오류 해결하기

마이프로필 아래에 유저의 현재 레벨 위치를 표시하는 작업을 했는데 기능 구현에 문제가 없었으나 콘솔에 거슬리는 에러를 발견했다.

태그 순서?의 문제였는데 뭔가 나중에 또 비슷한 에러를 만날 것 같아서 간단하게 기록해보려고 한다.

Warning: In HTML, ‹div> cannot be a descendant of <p›.

문제의 콘솔 error 💥

어마무시한 길이로 오류를 표시해주고 있지만 사실 우리가 봐야할 부분은 윗부분이다.
경고문을 먼저 해석해보면 "< div > 태그는 < p > 태그 자식요소로 쓰일 수 없다." 는 뜻이다.

간단하게 구조를 보면 이렇게 되어있는 셈이다.

<p>
	<div>
      어쩌구 어쩌구
	</div>
</p>

어느 부분에서 문제가 발생했는지도 알 수 있는데 현재 내 코드에서는 위 사진의 컴포넌트에서 문제가 발생했다.

이를 참고해서 실제 코드를 보도록 하자

문제의 컴포넌트 코드 찾기 👩🏻‍💻

MyPageProfile

여기 보면 < p > 태그를 사용했고 그 안에 UserLevelOverview 라는 컴포넌트가 들어있다.

UserLevelOverview

여기 보면 떡하니 < div > 태그를 사용했다.
컴포넌트를 분리해서 작성하다 보니 몰랐는데 전체적으로 보면 p 태그가 div를 감싼 꼴이 된 것이다.

현재 html 구조 ❌

<p> - MyPageProfile
	<div> - UserLevelOverview
      어쩌구 어쩌구
	</div>
</p>

태그 바꿔주기 🚧

아주 간단하게는 p 태그를 div로 바꿔주면 오류창은 사라진다.
시멘틱하게 사용하려면 다른 태그를 사용하는게 좋긴 하겠지만 우선 다른 기능 구현 + 오류들이 있어서 div 태그를 사용하는 방법으로 해결했다...(부끄)

---

퍼블리싱 공부할 때는 시멘틱 태그를 착착 지켜서 썼던 것 같은데 개발 공부를 하면서 무한 div 지옥에 익숙해진 것 같아서 큰일이다..!
SEO 라든가 코드의 가독성을 따졌을 때도 태그를 유의미하게 사용할 줄 알아야하니까 다시 태그 공부도 하고 적용해봐야겠다.