문제 상황
리액트에서 체크박스를 사용하던 도중에, 아래와 같은 에러가 발생했다.
Warning: Failed prop type: 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 usedefaultChecked
. Otherwise, set eitheronChange
orreadOnly
.
에러 내용을 보니, checkbox 인풋을 사용할 때 onClick
핸들러와 checked
속성을 동시에 사용하면 안된다는 내용이었다.
해결 방안
If the field should be mutable use
defaultChecked
. Otherwise, set eitheronChange
orreadOnly
.
에러 내용에서 제시한 해결방법은 다음과 같았다.
checked
속성 대신에defaultChecked
속성을 사용한다.onClick
대신에onChange
핸들러를 사용한다.onClick
을 사용하고 싶으면readOnly
속성을 추가한다.
해결 과정 (코드)
에러가 났던 코드:
<input
type="radio"
id="short_answer"
name={`question-type-${i}`}
value="short_answer"
className="apperance-none mr-2"
checked={survey?.question_type === 'short_answer'}
onClick={() => handleChangeQuestionType(i, 'short_answer')}
/>
checked를 defaultChecked로 수정을 하니 에러 로그가 없어졌다.
<input
type="radio"
id="short_answer"
name={`question-type-${i}`}
value="short_answer"
className="apperance-none mr-2"
defaultChecked={survey?.question_type === 'short_answer'}
onClick={() => handleChangeQuestionType(i, 'short_answer')}
/>