react에서 input을 활용하여 개발 하던 와중에 이상한 에러가 떴다.
A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
영어 뜻을 대략 해석해보니 undefined value에서 defined value로 바뀌었다는데 구글에 에러를 검색해보니 자세한 원인을 알 수 있었다.
input value가 undefined가 될 수 있을때 생기는 에러였다.
초기에 undefined에서 렌더링후에 값이 들어오는 경우 생기는 에러이다.
해당 에러의 해결방법은 input에 undefined가 들어가지 않게끔 기본 값을 설정해주면 해결된다.
<input type={"checkbox"} checked={user.service || false} disabled /> 서비스
<input name="name" value={undefind || ''}/>