[React] 체크박스 관리

체크박스들의 상태들로 fetch 요청을 보내야 하고, 체크박스를 모두 해제시키는 초기화 버튼을 구현하기 위해서 state로 체크박스의 상태들을 관리해주고 includes 메소드를 통해 메소드에 해당 체크박스가 체크되어있는지 확인하여 checked속성을 관리해주었다.
options state는 배열인데, 원하는 값을 추가하고 삭제하려면 원본을 유지한 상태로 state를 조작해야 하기 때문에 스프레드 연산자를 사용하였다.
배열에서 특정 요소를 삭제하는 방법으로는 filter 메소드를 사용하였다.

  const selectOptions = e => {
    e.target.checked
      ? setOptions(options => [...options, e.target.name])
      : setOptions(options =>
          [...options].filter(option => option !== e.target.name)
        );
  };

  const initFilter = () => {
    setOptions([]);
  };

const DetailedFilter = ({ filter, selectOptions, options }) => {
  const isChecked = options.includes(filter.id + "");
  return (
    <S.DetailedFilter>
      <S.CheckBox
        type="checkbox"
        name={filter.id}
        onChange={selectOptions}
        checked={isChecked}
      />
      <S.DetailedFilterContent>{filter.name}</S.DetailedFilterContent>
    </S.DetailedFilter>
  );
};