반응형
요약
" input 태그는 void 요소인 태그라서 <input> ~ </input> 사이에
빈공간, 자식요소(ex. 텍스트, 기타 태그 등)가 있으면 에러를 발생 시킨다."
에러명
Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
파파고좌의 해석) Uncatched Error: 입력은 void 요소 태그이며 'childreness'를 포함하거나 'dangerouslySetInner'를 사용해서는 안 됩니다.
잠깐 정리)
void: 아무것도 없음, 비어있음
dangerouslySetInnerHTML: react에서는 자바스크립트 자체에서 사용하는 innerHTML 을 사용할 수 없기 때문에, 같은 기능을 가진 것을 추가했는데, 그것이 요놈이다. 하지만 자바스크립트에서든 , 리액트에서든 태그 자체에 접근해서 HTML을 수정하는 것은 보안 취약점이 있기 때문에 리액트에서는 이러한 위험성을 개발자에게 경고하기 위해서 위험한 설정 이라는 경고 문구를 달아 두었다.
원인/ 해결방법
input 태그는 자식요소를 가질 수 없는 void(비어있는) 태그 이기 때문에 그 사이에 아무것도 안 넣으면 된다(빈공간도 포함)
- 만일 아무것도 안 넣었는데 위 에러가 뜬다? 그럼 백퍼 실수로 스페이스를 눌렀든 뭐든 빈공간이 문제이다(이걸 못 찾아서 30분을 허비했다).
반응형
