useId

useId는 접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하기 위한 Hook이다.

const id = useId()

 

레퍼런스

useId()

useId를 컴포넌트의 최상위에서 호출하여 고유 ID를 생성한다.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

 

사용법

접근성 어트리뷰트를 위한 고유 ID 생성하기

 

고유 ID를 생성하기 위해 useId를 컴포넌트의 최상단에서 호출한다.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

생성된 ID를 다른 어트리뷰트로 전달할 수 있다.

<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>