[리액트 공식 문서 스터디] React에도 고유 ID를 생성하기 위한 Hook이 있다고?

 

고유 ID를 생성하기 위해서 보통 직접만들거나, uuid 라이브러리를 이용해서 고유 ID를 생성하지 않나요?

이번에 찾아보니, React에도 고유 ID를 생성하기 위한 Hook이 존재합니다. 바로, useId입니다.

 

사용법

1. 컴포넌트 최상단에서 useId를 호출하고, 고유 ID값을 생성합니다.

2. 생성된 Id를 다른 속성에 전달 하라 수 있습니다. (ID는 고유해야하므로 useId를 생성하여 고유한 ID를 생성하는 게 좋다)

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  
  return(
  <>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>
  )

aria-describedby란?

- id위젯 또는 그룹과 이를 설명하는 텍스트 간의 관계를 설정하는 데 사용된다.

이점

React가 서버 렌더링과 함께 작동하도록 보장한다.  React 내부에서 useId는 호출한 컴포넌트의 '부모 경로'에서 생성된다. 그렇기 때문에 클라이언트와 서버 트리가 동일하면 렌더링 순서와 상관없이 '부모 경로'가 일치하게 되므로, useId 역시 일치할 것이다.