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

개요

React구문을 작성하다가

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
    at input
    at div
    at div
    at KmToMiles (:102:32)
    at div
    at App (:18:31)

이와 같은 에러를 발견했다. 직독직해해보니 대충 value값이 undefined된 값으로 부터 문제가 야기할 수 있다라고 판단되었다.

그래서 해당내용을 검색해보니

참고 사이트

이와같은 해결법을 제시해주었다.

해결법과 마찬가지로 value값에 {kiloMeter||''}를 넣으니 해결되었다. 하지만 이 방법 외에 다른 방법이 없을까 생각해보다가 useState에 기본값을 설정해놓으면 되는게 아닐까? 라고 생각했고

const [kiloMeter, setKiloMeter] = React.useState(0);

이와같이 작성해보니 경고메세지가 나타나지 않았다.

아! 이렇게 기본값을 설정하면 되는구나라고 해결할 수 있었다.