React 18 베타에서 추가된 useId 훅 살펴보기

문제 상황

폼 컴포넌트를 만들면서 label과 input을 연결하기 위해 고유 ID가 필요했다. 기존에는 uuid 라이브러리나 Math.random()을 사용했는데, SSR 환경에서 서버와 클라이언트의 ID가 달라 hydration 에러가 자주 발생했다.

function Input({ label }) {
  const id = `input-${Math.random()}`; // 서버/클라이언트 불일치
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

React 18의 useId

React 18 베타에서 추가된 useId 훅은 이 문제를 해결한다. 서버와 클라이언트에서 동일한 ID를 생성해준다.

import { useId } from 'react';

function Input({ label }) {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

생성되는 ID는 :r1:, :r2: 같은 형태다. 여러 요소에 사용할 때는 suffix를 추가하면 된다.

function Form() {
  const id = useId();
  return (
    <>
      <label htmlFor={`${id}-name`}>이름</label>
      <input id={`${id}-name`} />
      <label htmlFor={`${id}-email`}>이메일</label>
      <input id={`${id}-email`} />
    </>
  );
}

주의사항

• CSS 셀렉터용으로는 사용하지 않는 것이 좋다. 콜론 문자 때문에 이스케이프가 필요하다.
• key prop으로는 사용할 수 없다. key는 데이터 기반이어야 한다.
• 아직 베타 단계라 프로덕션 적용은 신중하게 판단해야 한다.

접근성을 위한 ID 관리가 훨씬 간편해질 것 같다. 정식 릴리즈를 기다려봐야겠다.