React에서 체크박스 목록의 선택 여부 확인/해제하는 방법
React에서 체크박스 목록을 다룰 때, 특정 조건에 따라 체크박스를 선택 또는 해제해야 할 수도 있습니다. 이 튜토리얼에서는 이 문제를 해결하기 위한 다양한 접근 방법을 살펴보겠습니다.
방법 1: 선택된 체크박스를 추적하기 위해 상태(state) 사용
이 방법에서는 checkedBoxes라는 상태 변수를 생성하여 선택된 체크박스를 추적합니다. 체크박스가 선택되거나 선택이 해제될 때마다 이 상태 변수를 업데이트합니다.
export default class YourComponent extends React.Component {
state = {
checkedBoxes: []
}
handleCheckbox = (e, s) => {
const checkedBoxes = [...this.state.checkedBoxes];
if (e.target.checked) {
checkedBoxes.push(s);
} else {
const index = checkedBoxes.findIndex((ch) => ch.roomId === s.roomId);
checkedBoxes.splice(index, 1);
}
this.setState({ checkedBoxes });
}
render() {
return (
<div className="checkboxRowContent">
{sensors.map((s) => {
return (
<div className="checkboxElementWrapper" key={s.id}>
<label htmlFor={`sensor${s.id}`}>
<div className="checkboxLabel">
<Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
</div>
<input
type="checkbox"
id={`sensor${s.id}`}
name="sensorId"
checked={checkedBoxes.find((ch) => ch.roomId === s.roomId)}
onChange={(e) => handleCheckbox(e, s)}
/>
<span className="checkbox" />
</label>
</div>
);
})}
</div>
);
}
}
방법 2: 제어되지 않는 컴포넌트에 defaultChecked 사용
제어된 컴포넌트를 사용하지 않고 체크박스 동작을 제어하려면 defaultChecked 속성을 사용할 수 있습니다. sensors 배열을 수정하여 체크박스를 선택하거나 해제할지 결정할 수 있습니다.
/* handleCheckbox 또는 다른 이벤트 핸들러 내부에서 */
s.roomId === values.id
/* 여기서 values.id는 방 id입니다. */
조건에 따라 sensors 배열을 업데이트함으로써 체크박스가 자동으로 선택되거나 해제됩니다.
결론
React에서 체크박스 목록을 다룰 때, 특정 조건에 따라 체크박스를 선택하거나 해제하기 위해 적절한 방법을 사용하는 것이 중요합니다. 선택된 체크박스를 추적하기 위해 상태(state)를 사용하거나 배열을 직접 수정하여 체크박스 동작을 제어하는 방법 중 선택할 수 있습니다. 두 가지 옵션 모두 유연하며 다양한 사용 사례에 적합하게 변경할 수 있습니다.
참고 자료 :
https://stackoverflow.com/questions/48520775/how-to-check-uncheck-a-list-of-checkboxes-in-react
같은 카테고리의 다른 글 보기 :
