[React+TypeScript] value 에러

문제발생

다음과 같은 코드에서

이런 오류를 뱉었다.

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

문제원인

input 속성 사용 시 value가 controlled form components이기에 발생하는 문제이다.

문제해결

value 값이 변하지 않는 값이라면 input 태그에 readOnly 태그를 추가해주면 되지만, 나는 입력 시마다 useState를 이용해 value 값을 변하게 할 생각이므로 value 대신 uncontrolled components인 defaultValue를 사용하면 된다.