useId란 ?

useId 접근성 속성에 전달될 수 있는 고유 ID를 생성하기 위한 React Hook입니다.

주의할점

• useId 구성요소의 최상위 수준에서 호출한다.
• useId의 반환값을 key를 위해 사용하지말아라.

  • key 값을 위해서 사용하면 너무 많은 호출이 일어난다.
  • 키는 데이터에서 생성 되어야 한다.

• 서버 렌더링을 사용하려면 서버 useId와 클라이언트에 동일한 구성요소 트리가 필요하다.

  서버와 클라이언트에서 렌더링하는 트리가 정확하게 일치하지 않으면 생성된 ID값이 불일치 하게 되기 때문이다.

useId 사용법

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  //최상단에서 호출
  // ...
  
  	return(
      <>
  		<input type="password" aria-describedby={passwordHintId} />
  		<p id={passwordHintId}>
      </>
  );
}
  

useId 왜 사용하는가 ?

<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 에서 좋은 습관이 아니다.

Why?

공식문서에 따르면 ..

구성 요소는 페이지에서 두 번 이상 렌더링될 수 있지만 ID는 고유해야 합니다. ID를 하드코딩하는 대신 다음을 사용하여 고유 ID를 생성하세요 useId. 라고 나온다.

• useId를 사용하게 되면 화면에 여러번 나타나도 생성된 ID가 충돌하지 않기 때문이다.
• 즉, 컴포넌트를 여러번 사용하더라도 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" />
        //이렇게 -firstName 접두사를 사용해서 다르게 생성함
      <hr />
      <label htmlFor={id + '-lastName'}>Last Name:
        //이렇게 -firstName 접두사를 사용해서 다르게 생성함
</label>
      <input id={id + '-lastName'} type="text" />
    </form>
  );
}

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 등을 전달할 수도 있다.

unmount()
React 루트 내부에서 렌더링된 트리를 삭제한다.
온전히 React만으로 작성된 앱에는 일반적으로 root.unmount에 대한 호출이 없다.