14.1 useId란?

14.1.1 useId 개념과 기본구조

useId란 브라우저에서 렌더링할 때 안정적으로 고유한 ID를 생성하기 위한 용도로써 React에 내장된 Hook입니다. HTML에서 ID는 style sheet에서 특정 style 선언을 가리키는 데 사용되며, JavaScript에서 특정 ID를 가진 요소에 접근하고 조작하는 데 사용됩니다. React에서도 클라이언트와 서버에서 모두 상호작용할 수 있는 HTML로 렌더링하고 있기 때문에, React 컴포넌트에서 사용하는 ID를 HTML로 연결하여 동일하게 사용하고 있습니다.

React에서 useId를 사용하기 위해서 다음 코드처럼 Hook을 가져오고, 사용할 값을 선언하게 됩니다.

import { useId } from "react";

const id = useId();

14.1.2 useId를 사용하는 이유

useId를 사용하는 이유는 useId를 통해 쉽게 견고한 ID를 생성할 수 있기 때문입니다. 또한 useId는 : 토큰을 포함하는 문자열을 생성하여 다음 ID의 특징을 보장하고 있습니다.

1. 한 페이지에서 하나의 고유한 ID를 사용해야 합니다. 만약 한 문서 안에 동일한 ID 값을 포함한다면, 사용자가 원하는 방식대로 요소를 관리할 수 없게 됩니다. useId를 사용한다면 React에서 작성한 ID를 고유하게 가질 수 있도록 설정하게 됩니다.
2. ID는 ID를 통해 사람이 읽을 수 있는 정보를 드러내지 않는 것을 권장합니다. 이는 보안과 관련하여 문제가 될 수 있습니다. useId로 ID를 생성한다면 해당 ID 요소의 정보와는 관련 없이 생성해주기 때문에 보안 문제를 해결할 수 있습니다.
3. useId를 사용하면 재랜더링과 같은 다른 변화에도 일관성 있게 ID의 값을 유지할 수 있습니다.

14.1.3. useId 사용 시 주의할 점