240520_TIL : chakra ui의 useCheckboxGroup

useCheckboxGroup

체크박스 그룹의 상태를 관리하기 위한 훅

반환값은 value, onChange, setValue, getCheckboxProx 를 사용했다.

* value : 선택된 체크박스 묶음의 값이며 배열형태

* setValue : value를 설정하는 함수

* getCheckboxProps: 체크박스 그룹과 체크된 상태를 위한 onchange 핸들러와 체크박스 props를 와 함께 반환. getCheckboxProps가 설정된 체크박스를 클릭하면(onChange) 그 값이 value 배열에 들어가고 나가고가 자동으로 된다(setValue). 즉 onChange와 setValue를 합친 기능이라고 보면될 것 같다.

<Checkbox {...getCheckboxProps({ value: '1' })} />
// 보통 이렇게 value를 넣어 값을 설정하는데
// 그럼 이 체크박스 클릭 시 value 배열에 저 '1'이 추가되는 것

 

 

그런데 getCheckboxProps를 사용하는 경우가 있고 안되는 경우가 있었다.

1. getCheckboxProps를 사용하는 경우 : 개별 체크박스

2. getCheckboxProps 안되는 경우 : 전체 체크박스

전체 체크박스란 클릭시 나머지 체크박스들을 전체 선택할 수 있고, 전체 선택 시 개별 체크박스를 해제하면 그 전체 체크박스도 해제되는 그런 것. 이 전체 체크박스의 경우 해당체크박스를 클릭했을 때 다른 체크박스의 이벤트가 일어나고, 값이 수정되는 작업이 일어나므로 이건 그냥 onChange와 setValue를 사용해줘야한다.

이건 체크박스는 아니지만 전체 체크박스는 이런 형태

 

코드적용

const { value: checkboxValue, setValue, getCheckboxProps } = useCheckboxGroup();
const [selectAll, setSelectAll] = useState(false); // 전체 체크박스 상태
  
  // 체크박스 전체 선택
  const handleAllCheck = (checked) => {
    if (checked) {
      setValue(idArray);  //idArray는 전체 체크박스의 값들이 들어있는 배열
    } else {
      setValue([]);
    }
    setSelectAll(checked);
  };
  
  // 전체 체크박스가 업데이트 되도록
  useEffect(() => {
    if (checkboxValue?.length === idArray?.length) {
      setSelectAll(true);
    } else {
      setSelectAll(false);
    }
  }, [checkboxValue, idArray]);

// 전체체크박스는 onChange와 setValue를 사용해서, 개별은 getCheckboxProps를 사용해서 상태관리를 해줌
<CheckboxGroup value={checkboxValue}>
  <Checkbox
    onChange={(e) => handleAllCheck(e.target.checked)}
    isChecked={selectAll}>통합</Checkbox>
  {filterList.map((item, i) => (
    <Checkbox {...getCheckboxProps({ value: item.id })} key={i}>
      {item.name}
    </Checkbox>
  ))}
</CheckboxGroup>