useListState

useListState (리스트 상태 관리)

useListState 훅은 리스트 상태와 그 핸들러를 관리해요. initialValues에서 타입을 추론하며, 정렬·삽입·업데이트·제거 등의 유틸리티를 제공해요.

출처: 문서

본문

useListState 핸들러를 자식 컴포넌트에 prop으로 전달하고 싶을 때 이 타입이 유용해요.

import { UseListStateHandlers } from '@mantine/hooks';

interface Props {
  handlers: UseListStateHandlers<{ name: string }>;
}

function Demo({ handlers }: Props) {
  return (
    <button onClick={() => handlers.append('hello')}>
      Append hello
    </button>
  );
}

항목 타입 설정 (Set item type)

기본적으로 useListState는 initialValues의 타입을 사용해요. 빈 배열로 훅을 호출할 때는 항목 타입을 지정해야 해요.

import { useListState } from '@mantine/hooks';

useListState<string>(['hello']); // ok, item type is string
useListState([]); // not ok, item type is any
useListState<string>([]); // ok, item type is string

정의 (Definition)

function useListState<T>(
  initialValue?: T[]
): [T[], UseListStateHandlers<T>];

Exported types

UseListStateHandlers 타입은 @mantine/hooks 패키지에서 내보내져요.

import type { UseListStateHandlers } from '@mantine/hooks';

더 알아보기 (Learn more)