오류 수정_checkbox

기기 명령 정보를 삭제할 때 편리하게 하기 위해 checkbox를 설정해주었다.
checkbox를 설정한 뒤 제목의 checkbox를 클릭하면 전체선택이 되지 않는 문제점이 발생했다.

초기코드(checkbox를 클릭했을 때 handleCheckboxChange 함수를 불러옴)

const handleCheckboxChange = (rowData) => {
	setCheckedItems((prev) => {
		const exists = prev.some((item) => item.id === rowData.id);
		if (exists) {
		if (checkedItems.length <= filterData.length){
			setStateAll(false);
		}
		return prev.filter((item) => item.id !== rowData.id); // 선택 해제
		} else {
		if(checkedItems.length === filterData.length){
			setStateAll(true);
		}
		return [...prev, rowData]; // 사용자 정보 전체 저장
		}
	});
	};

위 코드를 통해 rowData를 저장하는 것을 확인할 수 있다.

<Checks
	type='checkbox'
	label=''
	checked={stateAll}
	onChange={() => {
		let k = [];
		if (stateAll === true) {
			setCheckedItems([]);
		} else {
			for (let a in filterData) {
				if (!filterData[a].parent) k.push(filterData[a].id);
			}
			setCheckedItems(k);
		}
		setStateAll(!stateAll);
	}}
/>

여기서 문제가 발생한다. handleCheckboxChange 함수에서는 stateAll을 지정해주지 않는데, 위 코드에서는 stateAll의 상태를 체크한 후 실행된다. 그래서 전체선택을 해도 변화가 없었던 것이다.

변경 코드

case 'checkbox':
	data = <Checks
		type="checkbox"
		checked={checkedItems.findIndex((x) => parseInt(x.id) == parseInt(rowData.id)) > -1}
		onChange={() => {
			if (checkedItems.findIndex((x) => x.id == rowData.id) < 0) {
				let k = checkedItems.slice();
				k.push(rowData);
				setCheckedItems(k);							
				if(k.length === filterData.length){
					setStateAll(true);
				}
			} else {
				setCheckedItems(checkedItems.filter((x) => x.id != rowData.id));
				if (checkedItems.length <= filterData.length){
					setStateAll(false);
				}
		}
		}} />
	break

따라서, handleCheckboxchange함수를 사용하지 않고
체크박스에 체크가 안 된 경우 체크를 클릭했을 때, 기존 배열을 복사한 후(K) 체크한 rowData를 k에 push를 해준다.그런 다음 setCheckedItems를 통해 업데이트해준다. 현재 목록에 있는 기기 length와 선택된 k length가 같을 때는 전체 선택을 true로 변경해준다.

체크가 된 기기를 클릭했을 때는 checkeditems에서 체크된 rowdata를 제거한 후 상태를 업데이트 해준다. 그리고 전체선택을 해제되어야 하는지 확인하는 코드를 넣어줬다.

이렇게 코드를 지정해주면 setStateAll을 통해 stateAll을 지정해줄 수 있다.

하지만, 초기 코드를 보면

for (let a in filterData) {
	if (!filterData[a].parent) k.push(filterData[a].id);
}									}

k에 filterData[a].id를 push해주는 것을 확인할 수 있다.
이렇게 지정되어 있어서 기기 명령 삭제를 해도 삭제가 되지 않았다.

위에서 보면, k에 rowdata를 push해주기 때문에 코드를 변경해주었다.

<Checks
	type='checkbox'
	label=''
	checked={stateAll}
	onChange={() => {
		let k = [];
		if (stateAll === true) {
			setCheckedItems([]);
		} else {
			for (let a in filterData) {
				if (!filterData[a].parent) k.push(filterData[a]);
			}
			setCheckedItems(k);
		}
		setStateAll(!stateAll);
	}}
/>

그 결과, 전체선택 / 해제 기능이 제대로 구현이 되었고 기기 명령 삭제도 제대로 작동이 되었다.