🐞 문제

리액트(React)에서 체크박스(Checkbox) 사용 시 아래와 같은 에러가 발생할 때가 있다.

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`.

input type으로 checkbox를 쓸 때 onClick 핸들러를 제공하고 checked 값을 설정하는 식으로 코딩하면 이런 에러 메시지가 발생한다.

💊 해결방법

1. onClick 핸들러를 없애고 onChange 핸들러를 사용한다.
2. onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다.

나의 경우에는 checkbox를 공통 컴포넌트로 만드는 작업중이었기 때문에 onChange 핸들러를 사용해 해결하였다.