React에서 체크박스 속성 설정하기

1. React의 체크박스
2. React에서 체크박스 check 속성 설정

JSX에 정의된 양식은 단순한 HTML 요소 이상입니다. 양식은 내부 데이터를 저장하고 전송해야 하므로 이를 관리하기 위한 내부 상태가 필요합니다.

HTML 체크박스를 예로 들어보겠습니다. 자연스러운 상태에서 HTML 체크박스는 checked 속성의 값을 저장할 수 있습니다. 그러나 앱을 개발하는 경우 요소의 내부 상태에 데이터를 저장하는 것만으로는 충분하지 않습니다. 앱 전체에서 참조할 수 있도록 checked 속성의 값을 React 앱의 내부 상태에 저장해야 합니다.

React의 체크박스

React의 체크박스 요소는 특정 규칙을 따라야 합니다. 10년 전에는 HTML 요소에 대한 새 속성을 조건부로 생성하는 것이 허용되었을 수 있습니다. 이는 React의 모범 사례 권장 사항에 위배됩니다. 모든 확인란 요소는 checked 속성을 포함하거나 포함하지 않고 생성해야 합니다.

checked 속성 없이 시작된 체크박스 요소는 제어되지 않습니다.

<input type="checkbox" name="uncontrolled"></input>

checked 속성으로 정의된 체크박스 요소는 다음과 같이 제어됩니다.

<input type="checkbox" checked={true} name="controlled"></input>

<input> 요소는 제어되거나 제어되지 않는 구성 요소로 시작되어야 합니다. 일반적인 실수는 checked 속성을 null 또는 undefined 값으로 설정하는 것입니다. JavaScript 코더는 이러한 값이 false 부울 값으로 자동 변환될 것으로 예상할 수 있지만 React는 다르게 작동합니다.

혼란스러운 오류

React가 null 또는 undefined 값을 가진 속성을 만나면 속성을 무시하고 렌더링하지 않습니다. 나중에 초기 값이 true가 되면 checked 속성이 다시 나타나 제어되지 않는 구성 요소에서 제어되는 구성 요소로의 변경을 트리거합니다.

React는 구성 요소가 제어되거나 제어되지 않은 상태로 초기화되어야 한다고 알려주는 오류를 발생시킵니다. 확인란 구성 요소가 checked 속성 없이 정의된 경우 나중에 추가할 수 없습니다.

많은 사람들은 체크박스에 checked 속성을 설정하면 체크박스가 제어된 구성요소로 초기화된다는 사실을 모릅니다. 이것이 그들이 다음과 같은 오류 메시지에 혼란스러워하는 이유입니다.

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

React에서 체크박스 check 속성 설정

문제를 이해하고 나면 매우 쉽게 해결할 수 있습니다. 제어되는 확인란 구성 요소를 만들려는 경우 checked 속성이 true 또는 false로 평가되는지 확인해야 합니다. 이는 defaultProps 속성을 설정하고 checked 속성을 기본적으로 false로 설정하여 가능합니다. 다음은 코드 샘플입니다.

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}

defaultProps 사용의 또 다른 이점은 기본값만 표시한다는 것입니다. 사용자는 여전히 앱과 상호 작용하고 checked 속성의 상태를 변경할 수 있습니다.

checked 속성을 true 또는 false로 설정하면 사용자가 상태를 변경할 수 없습니다.