본문으로 건너뛰기

useCheckList

체크리스트에 사용할 hook - checked 관련 control을 제공합니다.

function useCheckList<T extends Item>(
initialItems: T[]
): {
list: T[];
set: (items: T[]) => void;
// type IdType = T['id'];
isChecked: (id: IdType) => boolean | undefined;
isAllChecked: () => boolean;
check: (id: IdType) => void;
unCheck: (id: IdType) => void;
toggle: (id: IdType) => void;
updateItem: (id: IdType, checked: boolean) => void;
toggleAll: () => void;
checkAll: () => void;
unCheckAll: () => void;
updateAll: (checked: boolean) => void;
getCheckedList: () => T[];
getCheckedIds: () => (string | number)[];
};

Example

const { list, isChecked, toggle, toggleAll, checkAll, getCheckedIds } = useCheckList(shopList);

useEffect(() => {
checkAll();
}, [checkAll]);

Warning

리스트의 아이템이 많은 경우 perf 가 떨어질 수 있습니다.