React console log Warning: A component is changing an uncontrolled input to be controlled.

Warning: 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. More info: https://reactjs.org/link/controlled-components

Forms – React

일단 콘솔로그에서 확인한 문서의 한글 버전은 아래의 페이지인데,

https://ko.reactjs.org/docs/forms.html#controlled-components

폼 – React

JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것입니다.
…
value 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 this.state.value가 되고 React state는 신뢰 가능한 단일 출처 (single source of truth)가 됩니다. React state를 업데이트하기 위해 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.
제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정됩니다. 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.

 

 

로그 말 그대로 구성 요소가 제어할 수 없는 입력을 변경하고 있다는 얘기.

즉 초기값이 undefined가 되어버리면 제어가 되지 않기 때문에 입력값 에러가 발생 할 수 있으므로 미리 빈 값인 ''를 선언해준다는 이야기인듯

 

value={ value }

해당 코드를 아래와 같이 변경해주면 로그 에러 해결

value={ value || '' }

 

 

 

아래의 스택 오버플로우를 참조하였습니다.

https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro

A component is changing an uncontrolled input of type text to be controlled error in ReactJS