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

인풋창에 글씨를 입력하는데 이상한 에러가 떴다

act-dom.development.js:86 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:

=>이 경고 메시지는 React의 제어 컴포넌트(controlled component)와 비제어 컴포넌트(uncontrolled component)의 차이 때문에 발생한다

제어 컴포넌트는 사용자 입력에 대한 값을 React state에 저장하여 컴포넌트 내부에서 관리하고, 비제어 컴포넌트는 사용자 입력에 대한 값을 DOM에서 직접 읽어오기 때문에 React state로부터 관리되지 않는다

이 경고 메시지는 비제어 컴포넌트에서 발생하는 경우가 많다 예를 들어, 이 경고 메시지에서 "changing an uncontrolled input to be controlled"는 비제어 컴포넌트인 input 요소에 대한 경고 메시지이다

해결 방법으로는, input 요소의 value 속성이 처음 렌더링될 때 undefined가 되지 않도록 초기값을 설정하거나, React state를 사용하여 값을 관리하는 제어 컴포넌트로 변환하는 하거나 초기값을 설정하는 경우에는 defaultValue 속성을 사용한다

 

말만 어렵지 input의 value가 undefined일 때 ''가 들어올 수 있도록 하면 된다.

  value={remarked[num] || ""}