[React] React Hooks - useId

useId란 무엇일까?

useId는 고유 아이디를 만드는 리액트 훅이다.
고유 아이디는 접근성 속성의 값으로 넘겨질 수 있다.

useId 훅 사용 방법

컴포넌트의 최상위 레벨에서 호출하고 반환된 값을 아이디로 사용한다.

import { useId } from 'react';

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

주의사항

• 루프 또는 조건문 블록 안에서 사용할 수 없다.
• 리스트의 key에 사용하는 것은 권장되지 않는다. key는 데이터로부터 만들어져야 한다.

접근성 속성에 어떻게 사용할 수 있을까?

HTML 접근성 속성 중 aria-describedby는 두 태그 간의 관계를 명시할 수 있다.

다음과 같이 password-hint라는 동일한 문자열을 아이디로 사용할 수 있지만, 같은 컴포넌트가 여러번 나타날 경우 아이디가 중복되기 때문에 좋지 않다.

<label>
  Password:
  <input
    type="password"
    aria-describedby="password-hint"
  />
</label>
<p id="password-hint">
  The password should contain at least 18 characters
</p>

대신 다음과 같이 useId 훅을 사용하면 PasswordField 컴포넌트가 여러번 나타나더라도 각각 고유한 아이디를 가지게 되어 충돌하지 않는다.

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>
    </>
  );
}

Reference

• useId – React