check box를 통한 다중 삭제

🧾 다중 삭제 기능 구현

기존에는 삭제 버튼을 클릭해 하나씩만 삭제할 수 있는 구조였다.
이 방식은 데이터가 많을 때 불편함이 컸기 때문에, 체크박스를 통한 다중 선택 삭제 기능을 새로 구현했다.

⚙️ 상태 관리

다중 선택을 위해 두 개의 상태를 추가했다.

• checkedItems: 선택된 행의 데이터를 저장하는 배열
  각 행의 rowData 객체가 저장된다.

• stateAll: 전체 선택 여부를 나타내는 불리언 값
  true: 모든 행이 선택됨
  false: 일부 또는 아무 행도 선택되지 않음

const [checkedItems, setCheckedItems] = useState([]);
const [stateAll, setStateAll] = useState(false);

🧩 개별 행 체크박스 로직

각 행의 체크박스는 현재 행이 checkedItems에 포함되어 있는지를 기준으로 선택 여부를 결정한다.
클릭 시에는 선택 상태를 반전시키며, 선택된 항목 수가 전체 데이터 수와 같을 경우 stateAll을 true로 변경한다.

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

🧭 전체 선택 기능

테이블 헤더의 체크박스를 통해 전체 선택/해제 기능을 구현했다.

전체 선택이 true일 때 선택하면, 전체 선택을 false로 한다.
전체 선택이 false라면, filterData를 순회하면서 데이터를 선택하고, checkedItems에 넣는다.

• 전체 선택
  filterData의 모든 데이터를 checkedItems에 추가
  stateAll을 true로 설정
• 전체 해제
  checkedItems를 빈 배열로 설정
  stateAll을 false로 설정

<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);
  }}
/>

🔄 UI 동기화

체크 상태가 바뀌면 테이블이 즉시 반영되도록
useEffect를 사용해 React Virtualized 테이블을 강제 업데이트했다.

	useEffect(() => {
		if (listRef?.current) listRef.current.forceUpdateGrids();
		forceUpdate();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [checkedItems]);

💭 회고

이 기능을 통해 사용자는 한 번에 여러 행을 선택하고 삭제할 수 있게 되어, 데이터 관리 효율성이 크게 향상되었다.
실제 사용자로부터 “삭제가 훨씬 편해졌다”는 긍정적인 피드백을 받았다.