React CheckBox 정리 ( 전체 선택 하기 )

체크 박스 관련 구현 (ft. React)

React에서 체크 박스에 관련된 기능 구현을 정리한 글입니다.

구현 기능들

1. 전체 체크 기능
2. 개별 체크 기능
3. 개별 체크 모두 체크 시 자동으로 전체 체크 ( 반대 상황 포함 )

구현에 필요한 것들

1. checkedList 배열
   개별 체크 박스들을 저장할 배열입니다.
2. onCheckedAll 함수
   onChange 이벤트를 통해 전체 체크를 하는 함수입니다.
3. onCheckedElement 함수
   onChnage 이벤트를 통해 개별 체크를 하는 함수입니다.
4. 체크 박스에 사용할 데이터.

   const dataLists = [
       {id : 1, data : "aaa"},
       {id : 2, data : "bbb"},
       {id : 3, data : "ccc"},
       ...
   ]

CheckBox 컴포넌트

const CheckBox = () => {
  1️⃣const [checkedList, setCheckedLists] = useState([]);

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

        2️⃣dataLists.forEach((list) => checkedListArray.push(list));

        setCheckedLists(checkedListArray);
      } else {
        3️⃣setCheckedLists([]);
      }
    },
    [dataLists]
  );

  // 개별 체크 클릭 시 발생하는 함수
  const onCheckedElement = useCallback(
    (checked, list) => {
      4️⃣if (checked) {
        setCheckedLists([...checkedList, list]);
      } 5️⃣else {
        setCheckedLists(checkedList.filter((el) => el !== list));
      }
    },
    [checkedList]
  );
};

1. 체크 박스들의 상태를 관리하기 위한 배열.
2. dataLists의 모든 정보를 checkedList에 넣습니다. 별도의 로직을 위해 list를 통으로 넣었지만 그럴 필요없는 경우 id만을 이용해도 상관없습니다.
   checkedListArray.push(list.id))
3. 전체 클릭 해제 시 배열을 비워 모두 해제 시킵니다.
4. 클릭된 개별 체크박스의 list를 기존의 checkedList 배열에 추가합니다.
5. 아닌 경우 filter 메서드를 이용해 걸러냅니다.

return (
      <input
        type="checkbox"
        1️⃣onChange={(e) => onCheckedAll(e.target.checked)}
        checked={
          2️⃣checkedList.length === 0
            ? false
            : 3️⃣checkedList.length === dataLists.length
            ? true
            : false
        }
      />
        {dataLists.map((list) => (
            <input
            key={list.id}
              type="checkbox"
              4️⃣onChange={(e) => onCheckedElement(e.target.checked, list)}
              5️⃣checked={checkedList.includes(list) ? true : false}
            />
        ))}g
    )}
  </CartListContainer>
);

1. onChange 이벤트를 이용해 체크 박스 이벤트를 설정합니다.
2. dataLists에 data가 없을 때 체크를 해제 시킵니다. ( data가 있었지만 삭제 버튼을 눌러 데이터를 삭제 시킬 때 그대로 체크돼 있는 경우 처리 )
3. checkedList의 길이가 dataLists의 길이와 같다면 모두 체크된 상태. 이 부분에서 개별 체크박스들을 모두 체크 했을 때 자동으로 전체 체크 박스가 체크 됩니다. ( 반대도 포함 )
4. 개별 체크 박스 함수에 현재 list를 전달합니다. 앞과ㄴ 마찬가지로 통으로 보낼 필요가 없다면 list.id 만 보내도 됩니다.
5. checkedList에 자기 자신의 정보가 포함 되어 있다면 check 합니다.