[React.js] React checkbox 에러

Warning Message

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

 

Warning Message가 발생하는 이유

onClick 핸들러와 checked 속성을 설정하는 코드에서 위와 같은 에러 메시지가 발생한다.

 

해결방법

1. onClick 핸들러 대신에 onChange 핸들러를 사용한다.

2. onClick 매서드와 함께 readonly 키워드를 사용하거나, checked 속성 대신 defaultChecked를 사용한다.

 

참고자료:

리액트에서 체크박스 사용 시 에러가 발생할 때 해결방법 · Tonic