useCheckboxHandler로 체크박스 일관성있게 처리하기

똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @24.08.08

 

여러 도메인을 막론하고 Checkbox UI는 자주 사용됩니다.

저는 예전부터 CheckBox 상태를 관리할 때 성능 및 편의성을 위해 Map 자료구조를 이용하여 구현했습니다.

 

다만 React 환경에서는 이전 상태를 기록해야하는 특성상, Map자료구조를 set는 코드가 꽤 장황해지는 경향이 있습니다.

이를 해결하고 모든 체크박스 UI에서 같은 방식으로 사용하기 위해 hooks를 새로 만들었습니다.

 

전체 코드는 깃허브에서 참고할 수 있습니다.

 

사용예시

const MOCK_DATA_LIST = [
  {
    id: 1,
    title: "Javascript",
    isChecked: true,
  },
  {
    id: 2,
    title: "Node.js",
    isChecked: true,
  },
  {
    id: 3,
    title: "Dart",
    isChecked: true,
  },
  {
    id: 4,
    title: "Java",
    isChecked: false,
  },
  {
    id: 5,
    title: "Python ",
    isChecked: false,
  },
];

  const { isChecked, handleChangeCheckItem, resetCheckedMap, getValues } =
    useCheckboxHandler({
      dataList,
      keyName: "id",
    });

  // init
  useEffect(() => {
    const checkedList = dataList?.filter((v) => v.isChecked);
    resetCheckedMap(checkedList);
  }, []);
  
  
  ...
  
  return (
	  <>
   		{dataList?.map((checkData) => {
          return (
            <Checkbox
              key={checkData.id}
              isChecked={isChecked(checkData)}
              onChange={() => handleChangeCheckItem(checkData)}
            >
              {checkData.title}
            </Checkbox>
          );
        })}
	  </>
  )

 

 

기본적으로 배열 형태의 데이터를 넘기면 상태와 이를 제어하기 위한 함수들을 줍니다.

map 자료 구조의 Key로 사용할 항목 또한 생성시 정의가 가능하며,

Map 자료구조에 담을 value 또한 key들으 배열로 넘겨 저장이 가능합니다.

이렇게하면 API 호출시 저장된 값이 id뿐 만 아니라 다양한 값이 있기 때문에 사용이 용이합니다.

 

 

 

여담

나중에 알게되었지만 Toss Slash 라이브러리에서 제공하는 useCheckList 라는 hooks가 이와 비슷한 것 같습니다.

장점이라면 warning에 포함된 퍼포먼스의 경우 Map자료구조이기 때문에 떨어지지 않을 것으로 예상됩니다.