리액트에서 checkbox 오류 해결하기

 

🚨 에러 발생 

리액트에서 input type 체크박스를 사용하던 중에 아래와 같은 에러가 발생했다. 

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

 

해석해보면 checked 속성을 사용하여 값을 지정하지만 해당 값을 변경할 때 처리할 onChange 핸들러가 없어 오류가 난다는 것이다.  따라서  `defaultChecked`를 사용하거나 `onChange` 혹은 `readOnly`를 추가하라는 것이다. 

 

💡 에러 해결

<input type="checkbox" checked={isDone} readOnly />

 

일단은 코드에 readOnly 를 추가하는 것으로 해결했다.  (이후에  onChange를 사용해 주는것으로 해결함)

 

✔️  내 코드에서 났던 에러처럼 checked 속성에 변경할 핸들러가 없는 경우에도 에러가 나지만 onClick 과 checked 속성을 동시에 사용할 때도 비슷한 에러가 나는 경우가 있으니 그런 경우 onClick 대신 onChange를 사용하는 것으로 해결할 수 있다.