프레임워크/React

[React] useId

은돌1113 2024. 3. 24. 09:46

🔗 출처

 

useId – React

The library for web and native user interfaces

react.dev


🤓 정의

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이 리스트 아이템에 대해 고유한 식별자를 생성하거나 관리해서는 안된다는 것입니다. (리스트를 효율적으로 관리하지 못하거나 성능 문제가 발생할 수 있습니다.)