[오류]Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

개요 및 기존 코드

React에서 발생되던 오류로 Input태그와 관련해서 사용을 잘못해서 나는오류...

공부하면서..뇌뺴고 공부하다보니.. 오류문구를 읽을 생각을 안해버려서.. 확실히 기억하고자 남긴다..

 

일단 학습을 진행하고있는 영상은 다음의 링크영상이었다 : https://www.youtube.com/watch?v=OZPRKFqPWG4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=10 

 

 

소스코드는 다음과 같이 작성했었다...틀린줄도모르고,.. 

---

오류내용

첫번째 오류

The above error occurred in the <input> component:
at input
at li
at ul
at div
at App (http://localhost:3000/main.ffb5a62f01331119bece.hot-update.js:281:78)

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

두번째 오류

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

at assertValidProps (react-dom.development.js:2942:1)
at setInitialProperties (react-dom.development.js:9920:1)
at finalizeInitialChildren (react-dom.development.js:10950:1)
at completeWork (react-dom.development.js:22193:1)
at completeUnitOfWork (react-dom.development.js:26596:1)
at performUnitOfWork (react-dom.development.js:26568:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performSyncWorkOnRoot (react-dom.development.js:26096:1)

---

오류 사유 및 수정 코드

 

문제의 사유는 로그을 읽고 알게된 내용이 input태그의 경우 내용이 void element tag즉 반드시 비어있어야 한다는것....

즉 하단의 코드로 처럼 자식의 내용을 전부 삭제후 확인결과 정상적으로 기능이 되는걸 볼 수 있었다...

이걸 오류라고 봐야하나 😔