useId()

최종 수정 : 2024-05-03

useId()

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

어떤 매개변수도 받지 않는다.

주의할 점

useId()를 리스트의 key를 생성하기 위해 사용해서는 안 된다. Key는 데이터로부터 생성해야 한다.

 

페이지에서 컴포넌트는 몇 번이고 렌더링 될 수 있지만 ID는 고유해야 한다. ID를 직접 입력하는 대신 useId를 활용해서 고유한 ID를 생성할 수 있다.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}

이제 PasswordField가 화면에 여러 번 나타나도 생성된 ID는 충돌하지 않는다.

 

여러 개의 연관된 엘리먼트의 ID 생성

import { useId } from 'react';

export default function Form() {
  const id = useId();
  return (
    <form>
      <label htmlFor={id + '-firstName'}>First Name:</label>
      <input id={id + '-firstName'} type='text' />
      <hr />
      <label htmlFor={id + '-lastName'}>Last name:</label>
      <input id={id + '-lastName'} type='text' />
    </form>
  );
};

---

참고 자료

https://ko.react.dev/reference/react/useId