React 오류 메시지 - checked without 'onChange'

input type="checkbox"에서 checked 속성 관리하기

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

아래와 같이 onClick속성과 checked를 사용하니 위와 같은 오류메시지가 떴다.

<input
	type="checkbox"
	id={catData.sub[j]}
	onClick={handleClick}
	checked={selectedKeyword.includes(catData.sub[j]) ? true : false}
></input>

 

checked가 바뀔 필요가 없으면 defaultChecked로 바꾸거나, readOnly속성을 지정하라고 한다.

리셋 버튼을 통해 checkbox를 전체적으로 해제하기 위해 checked속성을 사용한 것이기 때문에 다른 방법으로 해결한다.

onClick대신 onChange로 바꿔준다.

 

<input
	type="checkbox"
	id={catData.sub[j]}
	onChange={handleClick}
	checked={selectedKeyword.includes(catData.sub[j]) ? true : false}
></input>

이렇게 작성하면 오류메시지가 사라진다.

 

*해결방법

1. checked -> defaultChecked 혹은 readOnly 속성 지정

2. onClick -> onChange

 

 

참고한 페이지

https://devlog.jwgo.kr/2018/11/28/checkbox-error-with-react/

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