TEL - 05 : Warning: You provided a value prop to a form field without an onChange handler.

12 Mar 2022 in Study Log on Trial Error Log

리액트

---

• SITUATION :

  • Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

• REASON :

  • React 에서 input 의 값을 넣을 땐 항상 value 속성을 사용하였었다. 바닐라JS때부터도 항상 그래왔었고
    리액트에서도 무던히 잘 작동하던 속성이라 전혀 아무생각 없었는 갑자기 발생하는 오류

  • 읽기전용인 속성일 경우 value를 써도 되지만 값이 바뀌는 속성은 defaultValue 를 써야하는 것을 알게됨

• SOLUTION :

  • input 태그에서 텍스트를 계속 쓰면 state 값이 바뀌는 상황이므로 value 를 없애고
    defaultValue 를 적용 후 문제 해결