React(51) 체크박스 에러 You provided a 'checked' prop to a form field without an 'onChange' handler

 

 

문제상황 

리액트에서 <input type="checkbox"> 를 쓸 때,

onClick 핸들러를 통해 조건에 따라 checked 값을 주는 식으로 코딩하면 이런 에러 메시지가 발생한다.

이유는 checked 값을 핸들링하려면 onChange 핸들러를 사용해야 하기 때문이다.

Warning: You provided a `checked` prop to a form field without an `onChange` handler.

 

해결방법

- onClick 핸들러를 없애고 onChange 핸들러를 사용한다.

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

 

→ 나의 경우에는 리드온리를 붙여줬더니 깨끗하게 해결되었다.