[TIL] 0121

monthSub 리팩토링

checkBox 로직 개선
체크박스는 필터로 쓰일 때와 입력폼으로 쓰일 때가 있다
필터로 쓰일 때에는 초기 체크 설정이 전체로 되어있어야 하고,
개별 항목이 아무것도 체크되지 않았을 때 자동으로 전체 체크로 바뀌어야한다

기존에 만들어둔 건 입력폼에만 적용되게 만들어놔서 개별 항목이 모두 체크 안되어있어도 전체로 바뀌지 않았기 때문에 filter버전 로직을 추가해주었다

  
  // filterMode라는 bool값을 props으로 받아서 조건부로 구현한다
  const useCheckBox = ({ valueList, initialCheckeds, filterMode }) => {
  const [checkedList, setCheckedList] = useState(initialCheckeds);
  const ALL_VALUES = valueList.map(({ value }) => value);

  const handleCheckedAll = e => {
    const { checked } = e.target;
    if (checked) {
      setCheckedList(ALL_VALUES);
    } else {
      !filterMode && setCheckedList([]); 
      // filterMode일 때에는 다른 항목에 체크되어 있지 않을 경우, 전체 항목 체크 해제가 안되게 처리한다
    }
  };

  const handleCheckedElement = e => {
    const { value, checked } = e.target;
    if (checked) {
      checkedList.length === valueList.length
        ? setCheckedList([value])
        : setCheckedList([...checkedList, value]);
    } else {
      if (filterMode && checkedList.length === 1) {
        // filterMode이면서 체크된 개별 항목의 갯수가 하나일 때, 그 항목의 체크를 해제했을 경우, 전체 체크가 되도록(모든 값들을 상태에 넣음) 처리
        setCheckedList(ALL_VALUES);
        return;
      }
      setCheckedList(checkedList.filter(checkedItem => checkedItem !== value));
    }
  };

컴포넌트 기반의 Typescript를 토이프로젝트를 하기 위해 클래스 관련 공부를 했다.
vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에
타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class로 구현하는 방법밖에 없는 것 같았다.
클래스는 아직 거의 사용해본 적이 없고 너무 어려워서 좀 회피했었는데 이번 기회에 제대로 마스터해야겠다 ..!