react checkbox 전체 선택

관리자 페이지같이 다수의 리스트가 있는 화면을 만들다 보면 경우에 따라 체크 박스를 통해 여러 리스트를 선택 후 해당 리스트들에게 특정 기능을 부여할 때가 있다.

체크박스 전체 선택 / 해제 & 개별 선택

• thead에 있는 체크 박스 선택 시 리스트 전체 체크, 재 선택 시 전체 해제
• 개별 선택 후에도 thead에 있는 체크 박스 선택 시 리스트 전체 체크

import { useState } from "react";

export default function Test() {
  const userDatas:any = [];
  for (var i = 1; i < 15; i++) {
    var newObj = {
      id: i,
      name: `user${i}`,
      email: `test${i}@user.io`,
      createdAt: `2024-03-${i}`,
    };
    userDatas.push(newObj);
  }

  // 체크박스 전체 선택 & 해제
  const [checkItems, setCheckItems] = useState([]);
  
  // 개별 체크 
  const handleSingleCheck = (checked: any, id: any) => {
    if (checked) {
      setCheckItems((prev) => [...prev, id]);
    } else {
      setCheckItems(checkItems.filter((el) => el !== id));
    }
  };
  
  // 전체 체크 
  const handleAllCheck = (checked: any) => {
    if (checked) {
      const idArray: any = [];
      userDatas.forEach((el: any) => idArray.push(el.id));
      setCheckItems(idArray);
    } else {
      setCheckItems([]);
    }
  };

  return (
    <>
      <div className="flex items-center gap-2 w-[400px] mx-auto mb-3">
        <p>총 갯수 : {userDatas.length}</p>
        <p>선택된 갯수 : {checkItems.length}</p>
      </div>
      <table className="mx-auto border border-slate-700">
        <thead className="bg-purple-300">
          <tr>
            <th>
             {/*모든 선택될 경우 전체 체크 박스 선택 활성화*/}
              <input
                type="checkbox"
                onChange={(e) => handleAllCheck(e.target.checked)}
                checked={checkItems.length === userDatas.length ? true : false}
              />
            </th>
            <th>No.</th>
            <th>이메일</th>
            <th>이름</th>
            <th>생성일</th>
          </tr>
        </thead>

        <tbody>
          {userDatas.map((user: any, index: number) => (
            <tr key={user.id} className="border-b border-slate-700">
              <td className="w-14 text-center p-2">
	              {/*checkItems에 id가 있을 경우 checked */}
                <input
                  type="checkbox"
                  onChange={(e) => handleSingleCheck(e.target.checked, user.id)}
                  checked={checkItems.includes(user.id) ? true : false}
                />
              </td>
              <td className="text-center p-2">{index + 1}</td>
              <td className="text-center p-2">{user.email}</td>
              <td className="text-center p-2">{user.name}</td>
              <td className="text-center p-2">{user.createdAt}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

 

 

결과