💻 Frontend

3. React Hook, useId

category
💻 Frontend
useIdsyntaxParametersReturns주의 사항1. 접근성 속성에 대한 고유 ID 생성2. 여러 관련 요소에 대한 ID 생성정리면접References

useId

useId Hooks는 React 18에서 새롭게 추가된 Hooks로 고유 ID를 생성해주는 역할을 합니다.
 

syntax

component의 최상위 수준에서 useId를 호출하여 고유한 ID를 생성합니다.
import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

Parameters

useId는 인자를 받지 않습니다.

Returns

const id = useId()
console.log(id) // :r0:
useId는 이 특정 컴포넌트에서 useId 호출과 연결된 고유 ID 문자열을 반환합니다.
 

주의 사항

  • useId는 Hook이므로 컴포넌트 또는 커스텀 hook 최상위 수준에서만 호출할 수 있습니다. 루프나 if 조건 내에서 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 만들어 해당 컴포넌트에서 선언해야 합니다.
  • useId는 목록에서 key를 생성하는 데 사용하면 안됩니다. 키는 데이터에서 생성되어야 합니다.

1. 접근성 속성에 대한 고유 ID 생성

html 속성에 대한 id 값을 전달시킬 수 있습니다.
import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...
<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>
이것을 활용한 예제를 살펴보겠습니다.
aria-describedby와 같은 HTML 접근성 속성을 사용하면 두 태그가 서로 관련되어 있음을 지정할 수 있습니다. 예를들어 입력과 같은 <input/> 요소가 단락과 같은 다른 요소 <p>에 의해 설명되도록 지정할 수 있습니다 :
<label>
  Password:
  <input
    type="password"
    aria-describedby="password-hint"
  />
</label>
<p id="password-hint">
  The password should contain at least 18 characters
</p>
그러나 이와 같이 ID를 하드코딩하는 것은 React에서 좋은 방법이 아닙니다. 컴포넌트는 페이지에서 두 번 이상 렌더링될 수 있지만 ID를 하드코딩하는 대신 useId를 사용하여 고유한 ID를 생성합니다 :
import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}
이렇게 한다면 화면에 여러 번 렌더링되어도 ID가 충돌하지 않습니다.

2. 여러 관련 요소에 대한 ID 생성

여러 요소에 대한 ID를 제공해야 하는 경우 useId를 호출하여 해당 요소에 대한 공유 접두사를 생성할 수 있습니다 :
import { useId } from 'react';

export default function Form() {
  const id = useId();
  return (
    <form>
      <label htmlFor={id + '-firstName'}>First Name:</label>
      <input id={id + '-firstName'} type="text" />
      <hr />
      <label htmlFor={id + '-lastName'}>Last Name:</label>
      <input id={id + '-lastName'} type="text" />
    </form>
  );
}
id + “문자열” 형태로 사용하여 id를 접두사 처럼 활용할 수 있습니다. 이렇게 활용한다면 고유 ID가 필요한 모든 단일 요소에 useId를 호출하지 않아도 됩니다.
 

정리

면접

Q: useId Hooks에 대해 설명해주세요.
A: React 18에서 추가된 Hook으로 고유한 ID를 생성해주는 역할을 합니다. element 속성에 대한 고유한 id로 사용하거나 여러 관련된 요소에 대해 id를 접두사 처럼 사용할 수 있습니다.
 

References

useId – React
The library for web and native user interfaces
useId – React
https://react.dev/reference/react/useId
useId – React
[React] 18 Version useId hook
18버전의 새로운 hook 이 추가 됐다. 공식문서에 따르면, 수화 불일치를 피하면서 서버와 클라이언트에서 안정적인 고유 ID를 생성하기 위한 후크입니다. 토큰 을 포함하는 문자열을 생성하고, 이렇게 하면 토큰이 고유한지 확인하는 데 도움이 되지만 CSS 선택기와 같은 API에서는 지원되지 않습니다. useId 언제 사용 할까? 입력이 있는 레이블과 같이 두 개의 HTML 요소를 함께 연결하는 데 사용합니다. 매번 고유 ID를 생성해야 하는 곳에 사용하세요. 동일한 생성 ID를 여러 번 사용하려면 접두사 또는 접미사를 사용하세요. 사용하면 안될 때 useId CSS 선택기 에 후크를 사용하지 마십시오. 목록의 키에 사용하지 마십시오. 변경해서는 안 되는 값에는 사용하지 마십시오. 사용법은 간단하다 기존 ..
[React] 18 Version useId hook
https://develop-obm.tistory.com/92
[React] 18 Version useId hook