[리액트 에러노트]Error: Input Is A Void Element Tag And Must Neither Have `Children` Nor Use `DangerouslySetInnerHTML`.

❌ Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

 

react 프로젝트를 만드는 과정 중에 처음으로 component 단위가 아니라 element 단위까지 쪼개서 만들어보고 있다. 로그인 폼에 들어갈 input 부분을 만드는 과정에서 만든 에러!

 

styled component를 작성하는 과정에서 input은 그대로 적용할 수 없고, div로 한번 감싸줘야한다. 그래서 InputForm을 만들어 두고 밑에 적용할 때는 div가 아니라 input으로 적용했더니 저런 에러를 맞이했다. div로 수정해주고 오류 고침!

뭐랄까 재사용이 용이하게 컴포넌트를 나누고 엘리먼트를 나누는건데, 오타파티로 오류를 만나고 있다