리액트 체크박스 에러 해결

React

img

문제 상황

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

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 use defaultChecked. Otherwise, set either onChange or readOnly.

에러 내용을 보니, checkbox 인풋을 사용할 때 onClick 핸들러와 checked 속성을 동시에 사용하면 안된다는 내용이었다.

해결 방안

If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

에러 내용에서 제시한 해결방법은 다음과 같았다.

  1. checked 속성 대신에 defaultChecked 속성을 사용한다.
  2. onClick 대신에 onChange 핸들러를 사용한다.
  3. 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')}
/>



Profile picture
@김하연
4년차 프론트엔드 개발자 입니다. 사용자 경험 개선, 코드의 재사용성, 읽기 쉬운 코드에 집중하여 개발합니다.
AboutGithub LinkedinResume
Loading script...