구현 기능

• 전체 체크 기능
• 개별 체크 기능
• 개별 체크 모두 체크 시 자동으로 전체 체크
• 전체 체크일 때 개별 체크 하나라도 미체크시 전체 체크 미체크

구조

• 내가 한 프로젝트의 구조는 아래와 같이 부모 컴포넌트와 자식 컴포넌트가 두개인 구조이다😎

부모 컴포넌트
자식 컴포넌트
- 헤더 컴포넌트 : 전체 선택 체크박스
- 내용 컴포넌트 : 개별 선택 체크박스

부모 컴포넌트 (함수선언)

const parent = (props) => {
      const [data, setData] = useState({
            testInfo : {id : 1, data : "11"},
                       {id : 2, data : "22"},
                       {id : 3, data : "33"}
        }
    );
  
  // 체크박스 선택 시 삭제할 리스트
    const [delCheckedList, SetDelCheckedList] = useState([]);

    // 전체 체크 클릭 시 발생하는 함수
    const onCheckedAll = useCallback(
        (checked) => {
            if (checked) {
                const checkedListArray = [];

                data.testInfo.forEach((list) => 						       
                checkedListArray.push(list.id));
                SetDelCheckedList(checkedListArray);
            } else {
                SetDelCheckedList([]);
            }
        },
        [data.testInfo]);

    // 개별 체크 클릭 시 발생하는 함수
    const onCheckedElement = useCallback(
        (checked, intsId) => {
            if (checked) {
                SetDelCheckedList([...delCheckedList, intsId]);
            } else {
                SetDelCheckedList(delCheckedList.filter((el) => el !== id));
            }
        },[delCheckedList]);
}
    

헤더 컴포넌트 (전체 체크)

const header = (props) => {
    return (
        <Fragment>
            <table>
                <thead>
                <tr>
                    <th>
                        <Checkbox
                            checked={
                                props.delCheckedList.length === 0
                                    ? false
                                    : props.delCheckedList.length === props.data.testInfo .length
                                    ? true
                                    : false
                            }
                            onChange={(e) => props.onCheckedAll(e.target.value)}
                        />
                    </th>
                    <th>test1</th>
                    <th>test2</th>
                    <th>test3</th>
                </tr>
                </thead>
            </table>
        </Fragment>
    );
};

내용 컴포넌트 (개별 체크)

const content = (props) => {
    return (
        <Fragment>
            <div>
                <div>
                    <Checkbox
                        checked={
                           // data를 식별할 수 있는 컬럼에 key 값을 넣어줌
                          props.delCheckedList.includes(props.dataItem.id) ? true : false
                        }
                        onChange={(e) => props.onCheckedElement(e.target.value, props.dataItem.id)}
                    />
                </div>
                <div>{props.dataItem.test1}</div>
                <div>{props.dataItem.test2}</div>
                <div>{props.dataItem.test3}</div>  
            </div>
        </Fragment>
    );
};

참고

• https://velog.io/@tunakim/React-CheckBox-%EC%A0%95%EB%A6%AC-%EC%A0%84%EC%B2%B4-%EC%84%A0%ED%83%9D-%ED%95%98%EA%B8%B0