2022/03/20 input 태그 에러 : input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

 

The above error occurred in the <input> component:

    at input
    at p
    at div
    at ReducerTest (http://localhost:3000/static/js/bundle.js:465:70)
    at Routes (http://localhost:3000/static/js/bundle.js:46185:5)
    at div
    at App
    at Provider (http://localhost:3000/static/js/bundle.js:41871:20)
    at Router (http://localhost:3000/static/js/bundle.js:46118:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:45594:5)

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.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.tsx @ index.tsx:10
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:2692 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
    at assertValidProps (react-dom.development.js:2692:1)
    at setInitialProperties (react-dom.development.js:9134:1)
    at finalizeInitialChildren (react-dom.development.js:10201:1)
    at completeWork (react-dom.development.js:19470:1)
    at completeUnitOfWork (react-dom.development.js:22815:1)
    at performUnitOfWork (react-dom.development.js:22787:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21881:1)

참조자료 : https://steadily-worked.tistory.com/464

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

• input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다.
• 해결책: <input></input> 안에 값을 제거해준다.
• <input/>으로 쓰는 것이 더 좋다.