ReactJS에서 체크박스 체크 state(상태) 다루는 방법

ReactJS에서 체크박스의 선택 상태를 처리하는 방법

ReactJS에서 체크박스를 작업할 때, 선택 상태를 처리하는 방법을 이해하는 것이 중요합니다. 이 튜토리얼에서는 ReactJS에서 체크박스의 선택 상태를 효율적으로 관리하기 위해 다양한 접근 방법을 탐색해보겠습니다.

부모 컴포넌트에서 자식 컴포넌트로 프롭스 전달하기

제공된 코드에서 자식 컴포넌트인 B.js의 체크박스의 선택 상태는 부모 컴포넌트인 A.js에서 전달된 checkBoxDefaultStatus 프롭스로 결정됩니다.

클릭될 때 자식 체크박스의 선택 상태를 변경하기 위해, 부모 컴포넌트에서 자식 컴포넌트로 handleCheckBoxClick() 메서드를 프롭스로 전달해야 합니다:

<B handleCheckBoxClick={this.handleMultiSelect}/>

이를 통해 자식 컴포넌트에서 부모 컴포넌트에 정의된 handleCheckBoxClick() 메서드를 호출할 수 있게 되어, 선택 상태를 업데이트할 수 있습니다.

자식 컴포넌트에서 선택 상태 업데이트하기

자식 컴포넌트인 B.js에서는 handleCheckBoxClick() 메서드를 수정하여 클릭 이벤트를 처리하고 체크박스의 선택 상태를 업데이트해야 합니다:

handleCheckBoxClick(no, event) {
  var checkBoxClick = this.state.checkBoxClick;
  checkBoxClick[no] = !this.state.checkBoxClick[no];
  this.setState({ checkBoxClick });
  
  var alltrue = Object.keys(checkBoxClick).every((k) => { return checkBoxClick[k] });

  if (alltrue) {
    this.props.handleMultiSelect();
  }
  
  if (this.props.checkBoxDefaultStatus) {
    this.props.handleMultiSelect();
  }
}

handleCheckBoxClick() 메서드에서는 이벤트 타겟의 값을 사용하여 현재 체크박스의 선택 상태를 가져옵니다. 그런 다음, 새로운 선택 상태로 checkBoxClick 상태를 업데이트하고 setState()를 사용하여 상태 업데이트를 트리거합니다.

또한, 모든 체크박스가 선택된 상태인지(alltrue) 확인하고, 이 조건이 충족되면 부모 컴포넌트의 handleMultiSelect() 메서드를 호출합니다. props.checkBoxDefaultStatus가 true인 경우에도 handleMultiSelect()를 호출합니다.

‘checked’ 프롭스 사용하기

원래 코드에서 체크박스의 선택 상태를 결정하는 데 checked 프롭스를 사용했습니다. 그러나 defaultChecked를 사용하는 것이 좋습니다:

<input
   type="checkbox"
   inline={true}
   defaultChecked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick}
/>

defaultChecked를 사용함으로써, 체크박스가 프롭스에서 제공된 선택 상태로 올바르게 초기화되도록 보장할 수 있습니다.

결론

이 튜토리얼에서는 ReactJS에서 체크박스의 선택 상태를 처리하는 다양한 기술을 살펴보았습니다. 부모 컴포넌트에서 자식 컴포넌트로 프롭스를 전달하고 선택 상태를 올바르게 업데이트함으로써, ReactJS에서 동적이고 상호작용하는 체크박스 컴포넌트를 생성할 수 있습니다.

체크박스 상태를 프롭스에서 초기화할 때는 defaultChecked 프롭스를 사용하고, 자식 컴포넌트에서 체크박스 상태를 업데이트할 수 있도록 부모 컴포넌트에서 handleCheckBoxClick() 메서드를 전달하는 것을 잊지 마세요.

이러한 접근 방식을 따르고 ReactJS의 기능을 최대로 활용함으로써, 애플리케이션에서 동적이고 상호작용하는 체크박스 기능을 구현할 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/52146021/how-to-handle-checkbox-checked-status-in-reactjs

같은 카테고리의 다른 글 보기 :

reactjs