[React] input warning / defaultValue / readOnly

Warning: You provided a `value` prop to a form field without an `onChange` handler.

 

input을 다루게 될 때 위와 같은 warning메세지를 보곤 한다.

<input>태그 사용시 value속성이 고정값이 아니기 때문에 생기는 경고 메세지이다.

 

defaultValue를 사용하던지, readOnly를 사용하던지, onChange를 사용하면된다.

 

몇가지 테스트를 진행해보았다.

 

 

사용자로부터 값을 변경시키지 않을때,

<input type="tel" value={item.quan} readOnly />

사용자를 통해 변경을 하는게 아닌

설정해놓은 이벤트로 인해 동적으로 값을 변경 하는 상황이다.

 

그럴 땐 변화되지 않게 readOnly 속성을 넣으면 경고 메세지가 사라진다.

 

 

사용자부터 값을 변경 시킬 때

<input type="text" defaultValue={inputValue} />

이런식으로 defaultValue속성에 값을 넣어주면 된다.

 

하지만 defaultValue에 변수를 넣을 경우 

외부 이벤트를 통해 값이 변경되지 않는 문제가 발생한다.

 

 

변수를 적용하여 이벤트를 통해 변경을 하고싶고

사용자가 값을 변경할 수 있게 하고 싶다면?

 

onChange사용

  const [inputValue, setInputValue] = useState("");
  const inputChange = (event) => {
    setInputValue(event.target.value);
  };

<input type="text" value={inputValue} onChange={(event) => inputChange(event)} />

onChange를 함께 사용하고

inputValue값은 onChange로 제어하면 된다.