const handleChangeCheck = (checked, item) => {
if (checked) {
setCheck((prev) => [...prev, item]);
} else {
setCheck(check.filter((el) => el !== item));
}
console.log(check);
};
<RadioBox>
<input
id="ch1"
type="checkbox"
checked={check.includes("선택1")}
value="선택1"
onChange={(e) =>handleChangeCheck(e.target.checked, e.target.value)}/>
<label htmlFor="ch1">선택1</label>
</RadioBox>
<RadioBox>
<input
id="ch2"
type="checkbox"
checked={check.includes("선택2")}
value="선택2"
onChange={(e) =>handleChangeCheck(e.target.checked, e.target.value)}/>
<label htmlFor="ch2">선택2</label>
</RadioBox>
<RadioBox>
<input
id="ch3"
type="checkbox"
checked={check.includes("선택3")}
value="선택3"
onChange={(e) =>handleChangeCheck(e.target.checked, e.target.value)}/>
<label htmlFor="ch3">선택3</label>
</RadioBox>
input type checkbox에 onChange 이벤트를 추가한다.
현재 클릭된 엘리먼트의 checked 상태와 id 값을 handleChangeCheck 함수에 전달하였다.
input의 checked 상태가 변할 때마다 이 함수가 호출된다.
그러면 이제 체크된 항목을 가지는 배열 state를 만들고,
handleChangeCheck로 전달받은 값으로 배열 state에 처리시켰다.
(checked 상태일 경우 불변성을 유지해서 check 배열에 업데이트 시키고,
checked 상태가 아닐 경우 filter를 이용해서 해당 아이템을 삭제)