useId 예제


import { useId } from 'react'

function App() {
  const id = useId();
  
  return (
    <div>
      <label htmlFor={id + '-nickname'}> 닉네임 </label>
      <div>
        <input id={id + '-nickname'} type="text" />
      </div>
      <label htmlFor={id + '-password'}> 비밀번호 </label>
      <div>
        <input id={id + '-password'} type="password" />
      </div>
    </div>
  );
}

export default App;

위 예제에서 보시는 것과 같이 useId를 사용하여 전역적으로 서버와 클라이언트 모두 동일하게 사용할 수 있는 id를 만들 수 있습니다.

그리고 n개의 서로 다른 id를 만들기 위해 useId를 여러번 사용하여 생성하는 대신 하나의 useId를 만들어 고유한 동적인 id를 만들고 접미사를 붙여 서로 다른 아이디를 만들 수 있습니다.

현재 예제에서 닉네임과 비밀번호 두 개의 입력창을 만들기 위해는 각각 다른 id가 필요합니다. 이때 useId를 사용하여 id라는 변수를 만들고 ‘-nickname’과 ‘-password’라는 접미사를 붙여 서로 다른 id를 생성했습니다.

위 예제를 실행하면 다음과 같이 렌더링됩니다.

id + '-nickname' 은 :r0: -nickname 으로 렌더링되고 id + '-password' 는 :r0: -password 로 렌더링되었습니다. 이처럼 같은 useId로 생성한 id를 사용하더라도 접미사를 붙이면 서로 다른 id로 생성된다는 것을 확인할 수 있습니다.