어떤 훅인가요?
추가하려는 훅에 대해 간결하게 설명해주세요!
체크 가능한 리스트의 상태를 효율적으로 관리하는 훅입니다.
개별 항목의 선택/해제, 전체 선택, 선택된 아이템 목록 조회 등 체크박스 기반 UI에서 반복적으로 등장하는 로직을 간결하게 관리할 수 있습니다.
/** 체크 가능한 아이템의 최소 형태 */
export interface CheckableItem {
id: string | number;
checked: boolean;
}
/** T에서 id 타입만 뽑아내기 위한 유틸 */
export type IdType<T extends { id: string | number }> = T["id"];
/** useCheckList 훅 반환 타입 */
export interface UseCheckListResult<T extends CheckableItem> {
list: T[];
set: (items: T[]) => void;
isChecked: (id: IdType<T>) => boolean | undefined;
isAllChecked: () => boolean;
check: (id: IdType<T>) => void;
unCheck: (id: IdType<T>) => void;
toggle: (id: IdType<T>) => void;
updateItem: (id: IdType<T>, checked: boolean) => void;
toggleAll: () => void;
checkAll: () => void;
unCheckAll: () => void;
updateAll: (checked: boolean) => void;
getCheckedList: () => T[];
getCheckedIds: () => IdType<T>[];
selectedCount?: number;
totalCount?: number;
isIndeterminate?: () => boolean;
}
/** 훅 시그니처 */
export type UseCheckListHook = <T extends CheckableItem>(
initialItems: T[]
) => UseCheckListResult<T>;이 훅을 선정한 이유? (선택)
이 훅을 선정한 이유에 대해 설명해주세요!
모아온 프로젝트를 할 때 다중선택하는 필터가 꽤 많은데 그럴 때 이 훅이 있으면 유용하게 사용할 수 있을 것 같고 상태관리 하기도 편할 것 같다고 생각했습니다~
참고할만한 자료(선택)
Slash 라이브러리 - useCheckList
어떤 훅인가요?
체크 가능한 리스트의 상태를 효율적으로 관리하는 훅입니다.
개별 항목의 선택/해제, 전체 선택, 선택된 아이템 목록 조회 등 체크박스 기반 UI에서 반복적으로 등장하는 로직을 간결하게 관리할 수 있습니다.
이 훅을 선정한 이유? (선택)
모아온 프로젝트를 할 때 다중선택하는 필터가 꽤 많은데 그럴 때 이 훅이 있으면 유용하게 사용할 수 있을 것 같고 상태관리 하기도 편할 것 같다고 생각했습니다~
참고할만한 자료(선택)
Slash 라이브러리 - useCheckList