2022-01-28 React(img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`)

- 주어진 상황 😢

리액트에서 Thumbnail 컴포넌트에 img 요소를 집어넣으려고 하였다.

 

function Thumbnail(props) {
  
  return <img className="thumbnail" src={props.source} alt="cat.jpg"> </img>;
}

export default Thumbnail;

- 만난에러와 원인 😈

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

styled-component 을 사용할때 발생하는 문제로 input img 등과 같이 자식 태그를 넣을 수 없는 태그에 자식을 넣었을떄 발생함.

- 해결과정 🧵

 처음에 뭐가잘못됐는지 몰라서 역시 저대로 검색. 여러 블로그는 대부분 input 엘리먼트에 대해 서술되어있고

 

스택오버플로우에서 나와 같은 질문을 하는 사람을 찾음.

 

결과는 황당함. <img> </img> 사이에 공백이 있으면 자식 요소가 있다고 생각한단다...

 

function Thumbnail(props) {
  return <img className="thumbnail" src={props.source} alt="cat.jpg"></img>  // 띄어쓰기 없앰!

  
}

 

 

- 느낀점 😀

문법 하나하나가 정말 세세하게 손볼것이 많다는것을 이 오류 블로그를 작성하며 느낌... 

- 참조 사이트 

 

https://stackoverflow.com/questions/57073650/gatsby-img-is-a-void-element-tag-and-must-neither-have-children-nor-use-dang