🔑 React에서 useId란 무엇인가?

Source: Dev.to

useId는 React(버전 18부터 사용 가능)에서 제공하는 Hook으로, 컴포넌트 내부에서 고유하고 안정적인 식별자를 생성합니다. 이 Hook은 해당 컴포넌트 인스턴스에 대해 유일한 문자열을 반환합니다.

useId는 무엇을 위해 사용하나요?

요소 연결 (접근성)

가장 흔한 사용 사례는 <label>을 폼 필드( <input> )와 연결하는 것입니다. HTML에서는 label의 htmlFor 속성이 input의 id 속성과 동일해야 합니다. ID를 수동으로 코딩하고 컴포넌트를 여러 번 렌더링하면 중복된 ID가 발생해 HTML이 무효화되고 스크린 리더가 올바르게 동작하지 않을 수 있습니다.

useId를 사용하면 컴포넌트의 각 인스턴스가 서로 다른 ID를 받아, label과 input 사이의 올바른 연결을 보장합니다.

import { useId } from 'react';

function PasswordField() {
  // 이 인스턴스를 위한 고유하고 안정적인 ID 생성
  const passwordId = useId();

  return (
    <>
      Senha:
      {/* ID 사용 예시 */}
      <label htmlFor={passwordId}>Senha</label>
      <input id={passwordId} type="password" />
    </>
  );
}

Server‑Side Rendering(SSR) 호환성

useId는 서버에서 최초 렌더링될 때 생성된 ID와 클라이언트에서의 후속 렌더링(하이드레이션) 시 생성된 ID가 동일하도록 보장합니다. 이는 무작위 또는 비결정적으로 생성된 ID로 인해 발생할 수 있는 불일치를 방지하고, 서버와 클라이언트 간 HTML 일관성을 유지합니다.

기타 ARIA 속성

이 Hook은 다음과 같은 ARIA 접근성 속성에도 사용할 수 있습니다.

• aria-labelledby
• aria-describedby

언제 useId를 사용하면 안 될까?

• 리스트 키 생성: 리스트(.map())의 key는 데이터베이스 ID와 같이 안정적인 값에 기반해야 합니다. useId는 리스트 순서가 바뀔 때 안정성을 보장하지 않으므로 상태 버그를 일으킬 수 있습니다.
• 전역적으로 고유한 ID(UUID) 생성: useId가 React 트리 내에서는 고유하지만, 그 형식은 서버와 클라이언트 간 일관성을 위해 결정론적입니다. 따라서 무작위 UUID와 같은 전역 고유 식별자로 사용해서는 안 됩니다.