리액트 checked 와 onChange 의 관계

[KingNono1030]

@yongb2n

트러블 슈팅 2

Form 컴포넌트를 조합해 client 단에서 사용하면서 테스트를 하려고 하는데,

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

라는 에러가 발생

이유

React에서 checked는 제어 컴포넌트의 상태를 설정하기 위해 사용되는데,
checked를 사용하려면 반드시 onChange 핸들러를 통해 상태를 업데이트해야 함.
그렇지 않으면 React는 해당 컴포넌트를 읽기 전용(read-only) 상태로 간주함.

input 요소에 checked 속성을 제공했지만, onChange 핸들러가 없거나 제대로 전달되지 않은 경우.

우리 프로젝트에서 보자면 Radio 및 Checkbox Input에 onChange 속성이 없어서 상태를 제어하지 못해 에러가 발생한듯 함

중요 포인트) React는 checked와 onChange를 모두 제공하지 않으면 컴포넌트를 읽기 전용으로 간주하여 경고를 발생시킴!

여기서 알고가면 좋은 제어 컴포넌트와 비제어 컴포넌트의 차이

제어 컴포넌트는 컴포넌트의 상태를 React 상태 관리 시스템(예를들어 useState나 react-hook-form)을 통해 완전히 제어함

• checked 속성은 React 상태와 동기화되므로 반드시 onChange를 통해 상태를 업데이트해야 함!

비제어 컴포넌트는 컴포넌트의 상태를 React가 아닌 DOM 자체가 관리하는데 defaultChecked 속성을 사용하여 초기 상태를 설정할 수 있음

이 경우 React는 해당 요소를 DOM 수준에서만 초기화하고 이후에는 관여하지 않음!