[React] useId 파헤치기

Narcoker·2023년 10월 18일

React

목록 보기

30/32

useId 란

React 18에서 새롭게 추가된 Hooks로,
useId는 컴포넌트의 최상위 수준에서 호출하여 고유한 ID를 생성한다.

매개변수

매개변수를 사용하지 않는다.

반환

특정 컴포넌트 내 특정 useId 와 관련된 고유 ID 문자열를 반환한다.

주의사항

useId는 훅이므로 컴포넌트 최상단 또는 훅에서만 호출할 수 있다.
반복문이나 조건문 내에서 호출할 수 없습니다. 필요한 경우,
새로운 컴포넌트를 추출하고 컴포넌트 state에 작성해야 한다.

useId를 목록에서 key를 생성하기 위해 사용하지 마라.
key는 데이터에서 생성되어야 한다.

데이터 객체의 고유한 값을 사용하라는 의미인 것 같다.

활용법

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

아래와 같이 컴포넌트 최상단에서 useId를 호출하여 고유 ID 값을 생성하고
생성된 ID를 다른 속성에 전달할 수 있다.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...
<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>

label 태그를 사용할때 ID 값을 하드 코딩하는 것보다 useId를 통해서 id값을 부여한다.
이렇게 하면 이 컴포넌트를 재사용해도 label에 사용된 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 생성

여러 관련 요소에 ID를 제공해야 하는 경우,
useId를 호출하여 해당 요소들이 공유하는 접두사를 생성할 수 있다.

이 방식을 사용하면 고유 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에 공유 접두사 지정하기

단일 페이지에서 여러 개의 독립적인 React 애플리케이션을 렌더링하는 경우,
createRoot 또는 hydrateRoot를 호출하여 identifierPrefix에 옵션으로 전달해라.

이렇게 하면 생성된 모든 식별자가 지정한 고유한 접두사로 시작하기 때문에
서로 다른 두 앱에서 생성된 ID가 충돌하지 않는다.

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root1 = createRoot(document.getElementById('root1'), {
  identifierPrefix: 'my-first-app-'
});
root1.render(<App />);

const root2 = createRoot(document.getElementById('root2'), {
  identifierPrefix: 'my-second-app-'
});
root2.render(<App />);

createRoot 란

createRoot를 호출하면 브라우저 DOM 엘리먼트 안에 콘텐츠를 표시할 수 있는
React 루트를 생성한다.

React는 domNode에 대한 루트를 생성하고 그 안에 있는 DOM을 관리한다.
루트를 생성한 후에는 root.render를 호출해 그 안에 React 컴포넌트를 표시해야 한다.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);
...
root.render(<App />);

매개변수

domNode
DOM 엘리먼트. React는 이 DOM 엘리먼트에 대한 루트를 생성하고 렌더링된 React 콘텐츠를 표시하는 render와 같은 함수를 루트에서 호출할 수 있도록 한다.

onRecoverableError Optional
React가 오류로부터 자동으로 복구될 때 호출되는 콜백이다.

identifierPrefix Optional
React가 useId에 의해 생성된 ID에 사용하는 문자열 접두사이다.
같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용하다.

반환값

render(reactNode)
React 루트의 브라우저 DOM 노드에 표시한다.

reactNode: 표시하려는 React 노드. 일반적으로 과 같은 JSX 조각이 되지만,
createElement()로 작성한 React 엘리먼트, 문자열, 숫자, null, undefined 등을 전달할 수도 있다.