14. useId

14.1 useId란?

14.1.1 useId 개념과 기본구조

import { useId } from "react";

const id = useId();

14.1.2 useId를 사용하는 이유

1. 한 페이지에서 하나의 고유한 ID를 사용해야 합니다. 만약 한 문서 안에 동일한 ID 값을 포함한다면, 사용자가 원하는 방식대로 요소를 관리할 수 없게 됩니다. useId를 사용한다면 React에서 작성한 ID를 고유하게 가질 수 있도록 설정하게 됩니다.

2. ID는 ID를 통해 사람이 읽을 수 있는 정보를 드러내지 않는 것을 권장합니다. 이는 보안과 관련하여 문제가 될 수 있습니다. useId로 ID를 생성한다면 해당 ID 요소의 정보와는 관련 없이 생성해주기 때문에 보안 문제를 해결할 수 있습니다.

3. useId를 사용하면 재랜더링과 같은 다른 변화에도 일관성 있게 ID의 값을 유지할 수 있습니다.

14.1.3. useId 사용 시 주의할 점

1. useId는 루프 혹은 조건 내에서 호출이 불가능합니다. useId는 Hook이기 때문에 컴포넌트의 최상위 요소에서만 호출이 가능합니다.

2. 생성된 ID는 CSS 선택자로 사용할 수 없습니다. useId를 이용해 ID를 생성하게 되면 문자열을 반환하지만 :r1:, :r2: 처럼 콜론을 포함하는 값을 ID로 생성해 줍니다. CSS 선택자에서 특수문자를 포함하는 문자열을 지원하지 않기 때문에 CSS 선택자로 사용이 불가능합니다. 하지만 이런 경우, useId를 사용하여 원하는 요소에 접근할 수는 없지만 useRef를 사용하게되면 접근이 가능합니다.

3. 매번 고유 ID를 생성해 주기 때문에 변경해서는 안 되는 값에는 사용하지 않아야 합니다. 따라서 목록의 key값을 생성하는 데에는 사용하지 않는 것이 좋습니다.

14.2 useId 실용 예제

14.2.1. useId 기본 사용법

import React, { useId } from 'react';
import Child from './Child';

function App() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>App check</label>
      <input type="checkbox" id={id} />
      <Child />
      <Child />
      <Child />
    </>
  );
}

export default App;

import React, { useId } from 'react';

function Child() {
  const id = useId();

  return (
    <>
      <br /> // 줄바꿈 위한 코드
      <label htmlFor={id}>Child Check</label>
      <input type="checkbox" id={id} />
    </>
  );
}

export default Child;

14.2.2 (실습 1) 컴포넌트 재사용 시 다른 아이디 생성하기

function NameForm() {
  return (
    <>
      <label htmlFor="name">이름</label>
      <input id="name" type="text" />
    </>
  );
}

function App() {
  return (
    <>
      <NameForm />
      <NameForm />
      <NameForm />
    </>
  );
}

export default App;

import { useId } from 'react'

function NameForm() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>이름</label>
      <input id={id} type="text" />
    </>
  );
}

function App() {
  return (
    <>
      <NameForm />
      <NameForm />
      <NameForm />
    </>
  );
}

export default App;

14.2.3 (실습 2) 한 컴포넌트 내에서 다른 아이디 생성하기

import { useId } from 'react'

function App() {
  const id = useId();
  
  return (
    <div>
      <label htmlFor={id + '-nickname'}> 닉네임 </label>
      <div>
        <input id={id + '-nickname'} type="text" />
      </div>
      <label htmlFor={id + '-password'}> 비밀번호 </label>
      <div>
        <input id={id + '-password'} type="password" />
      </div>
    </div>
  );
}

export default App;