useId

useId (ID 생성)

useId 훅은 렌더링 사이에 유지되는 랜덤 ID를 생성해요. 주로 입력 요소를 라벨에 바인딩할 때 사용해요.

출처: 문서

본문

useId 훅은 렌더링 사이에 유지되는 랜덤 ID를 생성해요. 이 훅은 보통 입력 요소를 라벨에 바인딩하는 데 사용해요. 생성된 랜덤 ID는 ref에 저장되며 컴포넌트가 언마운트되지 않는 한 변경되지 않아요.

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

function Input({ id }: { id?: string }) {
  const uuid = useId(id);

  return (
    <>
      <label htmlFor={uuid}>Input label</label>
      <input id={uuid} />
    </>
  );
}

// input and label will have id 'my-id'
const withId = <Input id="my-id" />;

// input and label will have random id 'mantine-fZMoF'
const withoutId = <Input />;

정의 (Definition)

function useId(id?: string): string;

더 알아보기 (Learn more)