[React] useId

🔗 출처

useId – React

---

🤓 정의

useId()는 React 18 버전에 출시된 훅으로 접근성 속성에 전달될 수 있는 고유 Id를 생성하기 위한 React Hook입니다.

 

---

🥸 문법과 특징

const id = useId()

• 매개변수를 사용하지 않습니다.
• 라벨과 관련된 Id 생성
  : label 요소와 그와 연결된 입력 요소(input, select, textarea)에 대한 id와 htmlFor 속성을 사용할 때 사용합니다.

  

  useId를 console.log로 찍었을 때

  

  출력 화면

• 여러 관련 요소에 대한 Id 생성
  : 여러 관련 요소에 Id를 제공해야 하는 경우 호출하여 공유 접두사를 생성할 수 있습니다.

  import { useId } from "react";
  
  function App() {
    const id = useId();
    console.log(id);
  
    return (
      <div>
        <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>
      </div>
    );
  }
  
  export default App;

출력 화면

---

⚠️ 주의사항

• useId는 Hook이기 때문에 컴포넌트의 최상위 수준이나 자체 Hook에서만 호출할 수 있습니다.
  루프나 조건 내에서는 호출할 수 없습니다. 필요한 경우 새 구성 요소를 추출하고 상태를 해당 구성 요소로 옮겨야 합니다.
• useId는 리스트에서 키를 생성하는 데 사용해서는 안됩니다.
  키(key)는 React에서 동적으로 생성되는 요소들을 식별하는 데 사용되는 특별한 속성입니다.
  
  일반적으로 React에서는 component나 element의 리스트를 렌더링 할 때 각각의 요소에 고유한 키를 설정합니다.
  이 키는 일반적으로 데이터에서 파생돠며, 리스트의 각 항목이 가지는 고유한 식별자입니다.
  React는 이 키를 사용하여 요소들을 식별하고 변경사항을 효율적으로 처리합니다.
  
  그렇기 때문에 useId에서 파생된 문자열을 key로 사용하면 안 된다는 것은 키는 일반적으로 리스트 아이템의 데이터에서 파생되어야 하기 때문에 이 Hook이 리스트 아이템에 대해 고유한 식별자를 생성하거나 관리해서는 안된다는 것입니다. (리스트를 효율적으로 관리하지 못하거나 성능 문제가 발생할 수 있습니다.)

---