[오늘의 에러] 이미지 태그 관련 에러 : img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
    at assertValidProps (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:23679:17)
    at setInitialProperties (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:29792:7)
    at finalizeInitialChildren (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:30673:7)
    at completeWork (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:40290:21)
    at completeUnitOfWork (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:44046:20)
    at performUnitOfWork (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:44022:9)
    at workLoopSync (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:43936:9)
    at renderRootSync (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:43909:11)
    at recoverFromConcurrentError (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:43401:24)
    at performConcurrentWorkOnRoot (https://bug-free-space-succotash-95g797wr45pcxx4g-3000.app.github.dev/static/js/bundle.js:43313:26)

에러 이름

img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

리액트로 사이드 프로젝트 개발하다가 본 오류.
왜 나왔지? 하고 봤더니 정말 기초적인 실수로 낸 에러였...

에러 원인

img 요소의 경우 content 없이 동작하는 빈 요소(Empty element)로 attribute만을 가진다.
따라서 해당 contents를 가지면 안 된다.
나 같은 경우에는 img 태그 안에 이전 코드를 복붙하다가(...)
<img>{item.text}</img> 라는 말도 안 되는 구문을 써서 당연히 오류가 났다.

에러 해결법

img 태그 내부에 다른 요소를 넣지 않도록 수정해주자.