[#. React] React에서 checkbox select all 체크박스 전체 선택, 전체 선택 해제 하기

 

 

 

 

 

React에서 Checkbox 전체 선택/전체 해제, 각각 체크/해제를 해보자

난 UI Framework로 ant design을 사용해서 antd에서 Checkbox를 가져왔지만

아닌 경우, 다른 프레임워크에서 가져오거나 

 

<input type="checkbox" />

 

이렇게 input으로 가져와서 type을 checkbox로 지정해서 사용해도 된다

 

 

 

 

 

 

 

import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';

function CheckTest(props) {

   const [CheckList, setCheckList] = useState([])
   const [IdList, setIdList] = useState([])

   // 장바구니 리스트 props로 받아왔을 때, 배열 state에 전체 id값 넣기
   useEffect(() => {
      let ids = []

      props.cart.map((item, i) => {
         ids[i] = item._id
      })

      setIdList(ids)
   }, [props.cart])

   // 체크박스 전체 선택
   const onChangeAll = (e) => {
      // 체크할 시 CheckList에 id 값 전체 넣기, 체크 해제할 시 CheckList에 빈 배열 넣기
      setCheckList(e.target.checked ? IdList : [])
   }

   const onChangeEach = (e, id) => {
      // 체크할 시 CheckList에 id값 넣기
      if (e.target.checked) {
         setCheckList([...CheckList, id]);
      // 체크 해제할 시 CheckList에서 해당 id값이 `아닌` 값만 배열에 넣기
      } else {
         setCheckList(CheckList.filter((checkedId) => checkedId !== id));
      }
   }
  
   return (
      <div className="cart-div">
         <table>
           <thead>
             <tr>
               <th>
                  <Checkbox onChange={onChangeAll} checked={CheckList.length === IdList.length} />
               </th>
             </tr>
           </thead>
           <tbody>
              {props.cart && props.cart.map((product, index) => (
                 <tr key={index}>
                    <td>
                       <Checkbox onChange={(e) => onChangeEach(e, product._id)} checked={CheckList.includes(product._id)} />
                    </td>
                 </tr>
              ))}
           </tbody>
         </table>
       </div>
   )
}

export default CheckTest

 

 

 

일단 나는 React로 만든 쇼핑몰 프로젝트에서 장바구니 페이지에서 사용했고

prop으로 장바구니 리스트를 가져와서 장바구니 상품 개수 만큼 체크박스를 생성하도록 했다

최대한 사용하기 쉽도록 다른 코드를 제외하긴 했지만 그대로 붙여넣으면 props.cart가 없기 때문에 에러가 발생할 것이다

참고해서 잘 적용해서 사용하길!