내가 겪은 에러는 아니지만 팀원분의 에러를 같이 봐주고 해결해 드림으로써 좋은 공부가 되었으므로 기록해 보겠다.
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.
발견한 사실
웹에서 기능은 제대로 작동했지만 개발자 도구에서 에러가 뜨는 상황이었는데, 추후 배포 시 문제가 될 수도 있고 에러를 그냥 넘어가긴 찝찝해서 에러 메시지를 확인해 봤다. 내용은 대충,
form field에 'onChange' handler없이 value prop을 제공한 상태. value값이 변경되어야 하는 경우에는 defaultValue를 사용하고 그렇지 않다면 onChange나 readOnly를 사용하라고 되어 있었다.
즉,
- 변화되어야 하는 값일 때
- 변화되어야 하는 값이 아닐 때
에 따라 해결을 해야 하는 것이었다.
해결 방법
- 변화되어야 하는 값일 때 : value를 defaultValue로 변경.
- 변화되어야 하는 값이 아닐 때: readOnly를 넣어준다.
하지만,
변화되어야 하는 값이어서 defaultValue를 적용하였는데도 해결이 되지 않았다.
다시 구글링을 좀 해본 결과, 하단의 사실을 발견했다.
defaultValue={this.num}과같이 변수값을 주고 이벤트가 일어나면 변수값이 반영이 되지않는 값으로 계산한다. (input에서 다른값으로 고쳤지만 실질적으론 값이 변하지 않았음)
그래서 onChange이벤트속성을 이용하여 값이 변하면 이벤트 메서드를 실행하여 변수값에 대입해줘야한다.
출처: https://note.redgoose.me/article/1848/
그리하여 onChange를 넣어주니 해결 완료!!!!
(원래는 onClick이라고 되어 있었다.)
추가로 알아야 할 내용
React는 컴포넌트 객체의 상태를 props와 state, 2가지로 구분해서 관리한다. React 문서에 나온 내용에 따르면 props는 컴포넌트를 생성할 때 사용자가 지정하는 일종의 설정 값이다. 이 값은 외부에서 넘겨받아 컴포넌트를 초기화 할 때 사용한다. 한 번 지정하고 나면 이 값은 변경할 수 없다. 물론 JavaScript 언어 특성상 코드 레벨에서 변경은 가능하지만 개발자 도구 콘솔에 경고 메시지가 뜨는 걸 볼 수 있다. 즉, 초기 설정 값을 보관하는 용도인 셈이다.
(출처: https://note.redgoose.me/article/1848/)
