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

History

뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다.

 

위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 

당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다.

이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ

 

Problem

<input type="checkbox">
	<label>....</label>
</input>

 

Solution

• 리액트는 label for 대신에 htmlFor 를 사용한다.
• checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다.
  • 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다.

<!-- React -->
<input type="checkbox" id="chk" />
<label htmlFor="chk">....</label>