React 18에서 도입된 useId Hook은 개발자들에게 고유한 ID 생성을 위한 간편하고 효율적인 방법을 제공합니다. 이 Hook의 주요 역할은 요소의 속성에 고유한 ID를 할당하고, 관련된 여러 요소 간에 일관된 ID 접두사를 사용하는 것입니다.

useId의 특징은 다음과 같습니다:

• 서버와 클라이언트 간 일관성 유지: 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 양쪽에서 동일한 ID를 생성하여, 애플리케이션의 일관성을 보장합니다.

• 사용 편의성: 수동으로 고유 ID를 생성하고 관리하는 번거로움을 줄일 수 있습니다.

  
  

useId는 특히 접근성 개선에 유용합니다. 예를 들어, aria-describedby 속성을 사용할 때 useId는 스크린 리더 사용자에게 추가 설명을 제공하는 요소에 대해 고유하고 일관된 ID를 생성할 수 있습니다. 또한, <label>과 연결된 <input> 요소에 고유한 ID를 제공하여, 폼 요소의 접근성을 강화합니다.

useId는 다음과 같이 사용할 수 있습니다:

const id = useId();

<label htmlFor={id + '-firstName'}>First Name:</label>

<input id={id + '-firstName'} type="text" />

여기서 id + “-firstName” 형태로 useId를 접두사로 사용하여, 복수의 요소에 동일한 ID 패턴을 적용할 수 있습니다. 이 방법은 각각의 요소에 대해 별도의 useId 호출을 줄일 수 있습니다.

SVG 요소의 ID 생성과 같은 다양한 상황에서도 useId를 유용하게 사용할 수 있습니다. 각각의 SVG 요소에 대해 고유하고 일관된 ID를 생성함으로써, 요소 간의 참조를 명확하고 간결하게 관리할 수 있습니다.

주의할 점은 useId는 Hook이기 때문에 컴포넌트 또는 커스텀 Hook의 최상위 수준에서만 호출할 수 있다는 것입니다. 루프나 조건문 내에서의 호출은 허용되지 않으며, 필요한 경우 별도의 컴포넌트를 생성하여 사용해야 합니다. 또한, useId는 목록의 키 생성을 위해 사용되어서는 안 되며, 키는 데이터에 기반하여 생성되어야 합니다.

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