useId 알아보기 - 사용하는곳,주의할점

14.2.2. useId 활용 방법

앞서 useId가 고유의 ID를 생성해 준다는 사실 간단히 다뤄 봤습니다. 때문에 input 요소와 label을 연결하는 등 HTML 요소를 연결할 때 useId를 사용할 수 있습니다.


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

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

App.jsx

위의 코드는 문제없이 잘 작동합니다. 하지만 같은 페이지에서 위의 컴포넌트를 여러 번 렌더링하는 경우 동일한 ID를 가진 여러 개의 입력 요소를 가지게 됩니다. 페이지의 모든 ID는 고유한 ID를 가져야 하며, 3번째 input의 label을 클릭하더라도 해당 label과 연결된 input 요소 대신 첫 번째 input 요소에 focus가 맞춰지기 때문에 좋은 방법이라고 할 수는 없습니다. 이와 같은 문제를 해결하기 위해 useId를 사용할 수 있습니다.


import { useId } from 'react'

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

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

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

App.jsx - useId 활용

이처럼 useId를 통해 ID를 생성하게 되면 같은 페이지에서 컴포넌트가 여러 번 렌더링 되더라도 고유한 ID 값을 가지게 되기 때문에 중복 ID에 대한 걱정 없이 원하는 만큼 컴포넌트를 렌더링 할 수 있습니다.

14.2.3. useId 사용 시 주의할 점

useId를 사용할 때 몇 가지 주의해야할 상황에 대해 알아보도록 하겠습니다.

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

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

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


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

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

App.jsx


import { useId } from 'react'

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

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

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

App.jsx - useId 활용

14.2.3. useId 사용 시 주의할 점

useId를 사용할 때 몇 가지 주의해야할 상황에 대해 알아보도록 하겠습니다.

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

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

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