[error msg] 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.

리액트 인풋 관련 에러-Warning: A component is changing an uncontrolled input to be controlled.

 

문제상황

처음 페이지에 들어갔을땐 발생하지 않는데 새로고침을 했을 시 콘솔에 위와 같은 에러메시지가 출력되는 상황이다.

<div>
	<span>아이디</span>
	<Input
		onChange={onChange}
		value={userID}
		type="text"
		placeholder="아이디를 입력해주세요."
		required
	/>
</div>

해결과정

아마 위의 컴포넌트는 부모 컴포넌트를 통해 props를 전달받아야 하는데 새로고침으로 값을 전달받지 못해undefined가 들어가서 그런 듯했다.

 

그래서 일단 인풋에 || 연산자로 undefined일 때 공백을 지정해주었다.

<div>
	<span>아이디</span>
	<Input
		onChange={onChange}
		value={userID || ""}
		type="text"
		placeholder="아이디를 입력해주세요."
		required
	/>
</div>

 

 

바로 해결이 되었다...