[React]input 체크박스 개별선택, 전체선택 및 해제

😎 input checkbox를 통해 개별선택, 전체선택 및 해제를 구현

  // 체크된 아이템을 담을 배열
  const [checkItems, setCheckItems] = useState<any[]>([]);

//체크박스
  const handleSingleCheck = (checked: any, id: any) => {
    if (checked) {
      //setCheckItems에 전에 체크된것들을 나열하고 
      //새롭게 체크된거 추가
      setCheckItems((prev: any) => [...prev, id]);
    } else {
      //체크된거 해제
      setCheckItems(checkItems.filter((el: any) => el !== id));
    }
  };

  // 체크박스 전체 선택
  const handleAllCheck = (checked: any) => {
    if (checked) {
      const idArray: any = [];
      //서버에서 받은 데이터들을 순환해서 idArray배열에 넣어준다.
      memberList.forEach((el: any) => idArray.push(el.memberId));
      //idArray를 setCheckItems에 넣어주기
      setCheckItems(idArray);
    } else {
      // 만약 checked가 안되어 있으면
      // setCheckItems을 비워준다.
      setCheckItems([]);
    }
  };

  const dataList2 = (data: any) => {
    return (
      <S.DataList>
          data.map((el: any, index: any) => {
            return (
              <S.Container key={index}>
                <div>{el.memberId}</div>
                <div>{el.name}</div>
                <div>{el.memberStatus}</div>
                <div>
                  <S.CheckBox //개별선택
                    type='checkbox'
                    name={`select-${el.memberId}`}
                    onChange={(e) => 
handleSingleCheck(e.target.checked, el.memberId)}
// checked는 체크박스가 처음부터 체크된 상태로 나타나야 하는지 
// 나타내는 불리언 특성이다. 
// checkItems에 해당 memberId가 포함되어있으면
// checked는 true로 된다. 
                    checked={checkItems.includes(el.memberId) ? true : false}
                  />
                </div>
              </S.Container>
            );
          })
        ) 
      </S.DataList>
    );
  };

  const TitleList = () => {
    return (
      <S.AdminTitle>
        <div>No</div>
        <div>회원명</div>
        <div>상태</div>
        <div>
          <S.CheckBox //전체 체크
            type='checkbox'
            name='select-all'
            onChange={(e) => handleAllCheck(e.target.checked)}
            checked={checkItems.length === memberList.length ? true : false}
          />
        </div>
      </S.AdminTitle>
    );
  };

😎 선택된 리스트를 axios로 전송

  const deleteMember = async () => {
    // 체크된 리스트들을 map을 이용하여 서버에 전송
      checkItems.map((el: any) => {
        return axios({
          method: 'get',
          url: `${process.env.REACT_APP_API_URL}/admin/withdrawal/${el}`,
        });
      });

    // 체크된 리스크를 적용한 데이터를 브라우저상에 다시 출력
      await axios({
        method: 'get',
        url: `${process.env.REACT_APP_API_URL}/admin/member/list?
size=${size}&page=${page}&${sort}&name=${memberName}
&status=${filter}`,
      }).then((res) => {
        setMemberList(res.data.content);
        setTotalPages(res.data.totalElements);
        //axios 요청 전에 setCheckItems에 들어가 있던
        //데이터 비우기
        setCheckItems([]);
      });
    }
  };

styled-component

import styled from 'styled-components';

export const DataList = styled.div`
  margin-bottom: 0.24rem;
`;

export const AdminTitle = styled.div`
  width: 14.4rem;
  margin-top: 0.24rem;
  display: flex;
  background-color: ${({ theme }) => theme.palette.whitegreen};
  padding: 0.24rem 0.9rem 0.24rem 0.54rem;
  align-items: center;
  border-top: 0.03rem solid ${({ theme }) => theme.palette.txtgray};
  font-size: 0.24rem;
  div {
    &:nth-child(1) {
      flex-grow: 1.85;
    }
    &:nth-child(2) {
      flex-grow: 2;
    }
    &:nth-child(3) {
      flex-grow: 2;
    }
    &:nth-child(4) {
    }
  }
`;

export const Container = styled.div`
  cursor: pointer;
  width: 14.4rem;
  display: flex;
  align-items: center;
  padding: 0.24rem 0.9rem 0.24rem 0.58rem;
  border-bottom: 0.01rem solid ${({ theme }) => theme.palette.lightgray};
  font-size: 0.24rem;
  div {
    &:nth-child(1) {
      // flex-grow: 2;
      width: 2rem;
    }
    &:nth-child(2) {
      width: 4.4rem;
      text-align: center;
    }
    &:nth-child(3) {
      width: 4.8rem;
      text-align: center;
    }
    &:nth-child(4) {
      width: 2rem;
      text-align: right;
    }
  }
`;

//체크박스
export const CheckBox = styled.input.attrs(() => ({
  type: 'checkbox',
}))`
  accent-color: ${({ theme }) => theme.palette.green};
  width: 0.32rem;
  height: 0.32rem;
`;