[React] CheckBox 클릭 시 테이블 행에 선택효과를 주자!

기업과제를 하면서 체크박스를 클릭하면 해당 li의 배경색이 바뀌는 기능 구현(선택된 효과)을 처음 해보았다.
어떻게 해야할지 머리로는 조금 알겠는데 코드 작성이 쉽게 되지 않아서 검색을하며 겨우 구현을 했다.
잊어버리지 않기 위해 정리를 해본다!

⚙️ 기능

App.js

import { Table } from "./components/Table/Table";

function App() {
  const d = new Date();
  const year = d.getFullYear();
  let month = d.getMonth() + 1;
  let day = d.getDate();

  if (month <= 9) month = `0${month}`;
  if (day <= 9) month = `0${day}`;

  const date = `${year}-${month}-${day}`;

  const data = [
    {
      no: 1,
      title: "안녕하세요? 최고 귀여운 춘식입니다.",
      name: "춘식",
      date: date,
    },
    {
      no: 2,
      title: "오늘은 체크박스 체크 시 li에 변화를 줘보았습니다.",
      name: "정음",
      date: date,
    },
    {
      no: 3,
      title: "리액트는 정말 어려운 것 같아요.",
      name: "고심이",
      date: date,
    },
    {
      no: 4,
      title: "벌써 4월말입니다. 시간이 너무 빠르네요.",
      name: "정음",
      date: date,
    },
    {
      no: 5,
      title: "임의로 데이터를 만들어보았습니다. 연습용이에요!",
      name: "정음",
      date: date,
    },
  ];
  return (
    <div>
      <h1>체크박스 체크 시 li 변화시키기</h1>
      <Table data={data} />
    </div>
  );
}
export default App;

먼저 간단하게 데이터 배열을 만들고 테이블 컴포넌트로 데이터를 넘겨주었다.
테이블 컴포넌트는 div, ul, li태그를 이용해 만들어주었다.

1. 개별 체크/해제

  // 개별 체크
  // 체크된 아이템의 아이디를 배열 형태로 관리
  // 체크가 false이면 해당 item의 id가 아닌 것들만 담음.
const [checkedItems, setCheckedItems] = useState([]);

  const onChangeCheckBox = (e, item) => {
    const isChecked = e.target.checked;
    setCheckedItems((prevCheckedItems) => {
      if (isChecked) {
        return [...prevCheckedItems, item.no];
      } else {
        return prevCheckedItems.filter((no) => no !== item.no);
      }
    });
  };

개별 체크의 경우, 각 li에 onChange이벤트가 들어왔을 때 배경 색상이 변하도록 해주었다.
checkedItems배열은 체크된 아이템의 index 번호(no)를 담고 있는데
checked가 true라면 기존 배열에 이벤트가 발생한 아이템의 no를 추가하도록 했다.
그리고 체크가 해제되면 checked가 false이므로 이때에는 체크된 것만 필터링하여 리턴한다.

{data.map((item) => (
  <li
    key={item.no}
    className={checkedItems.includes(item.no) ? "select" : ""}
  >
    {이후 코드들...}

이렇게 되면 checkedItems 배열에 해당하는 item.no가 있다면 li에 select 클래스를 추가해 배경색을 적용해줄 수 있다.

2. 전체 체크/해제

// 전체 체크
  const onCheckBoxAll = (e) => {
    if (e.target.checked) {
      const checkedListArr = [];
      data.forEach((item) => checkedListArr.push(item.no));
      setCheckedItems(checkedListArr);
    } else {
      setCheckedItems([]);
    }
  };

전체 체크는 테이블의 header에 있는 checkBox에서 onChange 이벤트가 발생한다.
checked가 true라면 체크리스트 배열을 생성하고 데이터 전체를 forEach로 순회하면서 item.no들을 배열에 넣는다.
그리고 해당 배열을 checkedItems에 넣어 useState로 관리하도록 한다.

만약 checked가 false라면 checkedItems가 빈배열이 되어 전체 체크 해제가 된다.