useId 알아보기 - 사용하는 방법

usdId 사용하는 방법

이처럼 useId Hook을 이용하면 간단하게 고유의 ID값을 생성할 수 있습니다. 이번 챕터에서는 useId를 사용하는 방법을 간단한 예제를 통해 알아보겠습니다.

App.jsx는 useId로 체크박스에 ID를 부여하고, Child 라는 컴포넌트를 3번 보여주는 코드입니다.


import React, { useId } from 'react';
import Child from './Child';

export default function App() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>App check</label>
      <input type="checkbox" id={id} />
      <Child />
      <Child />
      <Child />
    </>
  );
}

App.jsx

Child 컴포넌트 또한 위와 같이 체크박스에 useId를 이용하여 아이디를 부여하는 코드입니다.


import React, { useId } from 'react';

export default function Child() {
  const id = useId();

  return (
    <>
      <br /> //줄바꿈 위한 코드
      <label htmlFor={id}>Child Check</label>
      <input type="checkbox" id={id} />
    </>
  );
}

Child.jsx

App.jsx 를 보면 같은 Child라는 컴포넌트를 3번 보여주고 있습니다.

해당 코드들의 ID값을 확인하기 위해 개발자 도구를 확인하면, 같은 Child 컴포넌트의 코드지만 이렇게 각각 다른 ID값이 생성되는 것을 확인할 수 있습니다. 이처럼 useId를 이용하면 일일이 다른 ID를 직접 넣지 않고 편리하게 고유한 ID값을 부여할 수 있습니다.