[React TypeScript] 체크박스 선택한 값 받기

여러개의 체크박스가 있고 현재 클릭된 체크박스들을 가져오고 싶을 때

우선 체크박스에 들어갈 데이터 배열은 다음과 같다.

  const categoryList = [
    { name: '캠핑기어' },
    { name: '취사용품' },
    { name: '침구·수면용품' },
    { name: '꾸미기·소품' },
    { name: '포터블가전' },
    { name: '아이디어상품' },
    { name: '밀키트·간편식' },
    { name: '장작' },
    { name: '주류' },
    { name: '기타 소모품' },
  ];

이 배열을 map 메서드를 사용하여 다음과 같이 화면에 표시했다.

              <div className='list'>
                {categoryList.map((item) => {
                  return (
                    <label className='checkboxLabel' key={item.name}>
                      <input
                        type='checkbox'
                        id={item.name}
                        onChange={(e) => {
                          onCheckedItem(e.target.checked, e.target.id);
                        }}
                      />
                      <label htmlFor={item.name}>
                        <span></span>
                        {item.name}
                      </label>
                    </label>
                  );
                })}
              </div>

(마크업을 이렇게 한 이유는 css로 커스텀 체크박스 이미지를 넣기 위함)

이때 input type checkbox에 onChange 이벤트를 추가한다.
현재 클릭된 엘리먼트의 checked 상태와 id 값을 onCheckedItem 함수에 전달하였다.
input의 checked 상태가 변할 때마다 이 함수가 호출된다.

그러면 이제 체크된 항목을 가지는 배열 state를 만들고,
onCheckedItem으로 전달받은 값으로 배열 state에 처리시켰다.
(checked 상태일 경우 불변성을 유지해서 checkedList로 업데이트 시키고,
checked 상태가 아닐 경우 filter를 이용해서 해당 아이템을 삭제)

  const [checkedList, setCheckedList] = useState<Array<string>>([]);

  const onCheckedItem = useCallback(
    (checked: boolean, item: string) => {
      if (checked) {
        setCheckedList((prev) => [...prev, item]);
      } else if (!checked) {
        setCheckedList(checkedList.filter((el) => el !== item));
      }
    },
    [checkedList]
  );