사이드 프로젝트로 코딩하던 도중, 일반적인 img태그와 Next.js에서 제공하는 Image태그를 비교하다가 아래와 같은 에러가 발생하였습니다.
img is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
해석하자면, "img는 자동 닫힘 태그로 자식을 두거나 속성으로 dangeroslySetInnerHTML을 사용해서는 안 됩니다."인데 여기서 자동 닫힘 태그란 간단하게 자식이 없는 태그입니다.
// 자동 닫힘 태그
<img />
// 자동 닫힘 태그 아님
<p>블라블라</p>
// dangerouslySetInnerHTML 속성 사용 불가
<img dangerouslySetInnerHTML={{ __html: '<span>Example</span>' }} />
에러 원인
이미지 태그에서 컨텐츠를 가져서 그렇습니다. 작업하다가 실수를 했는데 덕분에 새로운 에러를 발견했습니다.
<img src="경로" alt="대체 텍스트">컨텐츠</img>
해결 방법
이 오류는 정말 간단하게 해결할 수 있습니다. 이미지 태그 내부에 다른 요소나 텍스트를 작성하지 않으시면 됩니다. 혹시나 위의 원인처럼 컨텐츠라는 자식을 감싸야한다면 img 태그를 다른 요소로 감싸서 사용하도록 하면 됩니다.
<div>
<img src="경로" alt="대체 텍스트" />
컨텐츠
</div>
