useId 개요

1. useId 개념과 기본구조

HTML에서 id는 fragment를 사용하여 문서의 특정 부분에 연결하는 방법, 스크립팅할 때 요소를 대상으로 지정하는 방법, CSS에서 특정 요소의 스타일을 지정하는 방법으로 사용할 수 있습니다. React에서도 클라이언트와 서버에서 모두 상호작용가능한 HTML로 렌더링하고 있기 때문에, React 컴포넌트에서 사용하는 id를 HTML로 연결하여 동일하게 사용하고 있습니다. 그리고 useId는 브라우져에서 렌더링할때 안정적으로 고유한 id를 생성하기 위한 내장 React Hook입니다.


import { useId } from "react";

useId 가져오기


const id = useId();

컴포넌트 안에 useId 사용 예시

2. useId를 사용하는 이유

React 내장 Hook인 useId를 통해 쉽게 id를 생성할 수 있습니다. 또한 useId는 : 토큰을 포함하는 문자열을 생성하여 다음 id의 특징을 보장하고 있습니다.

먼저 한 페이지에서 하나의 고유한 id를 사용해야 하는 특징입니다. 만약 한 문서 안에 동일한 id 값을 포함한다면, 사용자가 원하는 방식대로 요소를 관리할 수 없게 됩니다. 만약 동일한 useId의 사용이 필요하다면, 접두사를 다르게 생성하여 여러 개의 id를 생성할 수 있습니다. 접두사를 다르게 생성하여 여러 개의 id를 생성하는 방법에 대해서는 아래 예제에서 다룰 예정입니다.

또한 id는 id를 통해 사람이 읽을 수 있는 정보를 나타내지 않는 것을 권장합니다. 이는 보완과 관련하여 문제가 될 수 있습니다.

마지막으로, useId를 사용하면 재랜더링 등 과 같은 다른 곳에서의 변화에도 일관성 있게 id의 역할을 유지할 수 있습니다.