문제 상황

새로 시작한 프로젝트의 컴포넌트를 개발하는데 다음과 같은 에러가 발생했다.
input is a void element tag and must neither have 'children' nor use 'dangerlouselySetInnterHTML'

문제 원인

styled-components를 쓰면서 발생하는 에러로, 자식 tag(children)을 가질 수 없는 컴포넌트에 자식을 넣어주면서 발생하는 에러다. 대표적으로 input이 있다. 내가 작성한 코드는 다음과 같았다.

function InputField() {
  return (
    <>
      <Input>
        <img src={person} alt="person" />
        <input type="text" placeholder="이름을 입력하세요" />
      </Input>
    </>
  );
}

const Input = styled.input`
  border: 1px solid black;
`;

처음에 코드를 작성할 때는 input 부분이 <Input type="text" placeholder="이름을 입력하세요." 일 때는 문제가 되지 않았지만, 내용을 수정하면서 위의 코드와 같은 모양으로 코드를 수정하니 오류가 발생했었다.

문제 해결

Input styled-components를 styled.input이 아니라 styled.div로 바꿔줬더니 쉽게 해결됐다.