[React] 노드의 트리 위치를 나타내는 useId 훅

useId 소개

---

useId()는 React 18 버전에 도입된 훅으로, 노드의 트리 위치를 나타내는 고유 ID(Base32 문자열)를 반환한다. 컴포넌트 트리가 여러 자식(children)으로 분기될 때마다 ID에 추가 비트를 삽입해서 각 자식의 위치를 나타낸다.

:r0: (부모 컴포넌트)
:r1: (자식 컴포넌트1)
:r2: (자식 컴포너트2)
...

 

주로 서버 / 클라이언트에서 생성한 트리(tree) 사이의 하이드레이션(hydration) 불일치(mismatch)를 방지하기 위해 사용한다. 즉, useId가 생성한 고유한 ID를 이용해 원활한 하이드레이션을 돕는 목적인 것. 리스트의 key를 만들기 위한 목적이 아니므로 주의한다.

 

출력값 예시

---

💡 : (콜론)은 querySelector 같은 CSS 셀렉터에선 지원하지 않는다(\ 백슬래시로 이스케이프해서 사용할 수는 있다). useId는 : 토큰을 포함한 문자열을 생성하므로 CSS 셀렉터에선 사용할 수 없다.

// App.js
function App() {
  const id = useId();
  return (
    <div>
      <h3>{`App - ${id}`}</h3> {/* App - :r0: */}
      <Child /> {/* Child - :r1: SubChild - :r2: */}
      <Child /> {/* Child - :r3: SubChild - :r4: */}
    </div>
  );
} 

// Child.js
function Child() {
  const id = useId();
  return (
    <div>
      <h3>{`Child - ${id}`}</h3>
      <SubChild />
    </div>
  );
} 

// SubChild.js
export default function SubChild() {
  const id = useId();
  return <h3>{`SubChild - ${id}`}</h3>;
}

 

화면 출력 결과 ▼

App - :r0:
Child - :r1:
SubChild - :r2:
Child - :r3:
SubChild - :r4:

 

참고로 동일 컴포넌트에서 useId 훅을 여러번 호출하면 각각 다른 ID를 생성한다.

// App.js
const id1 = useId();
const id2 = useId();
console.log(id1, id2); // :r0: :r1:

 

활용 예시

---

<label> ⇄ <input> 요소를 연결할 때 useId훅이 생성한 유니크 ID를 활용할 수 있다. 

// Basic Example via React 공식 문서
function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input id={id} type="checkbox" name="react" />
    </>
  );
}

 

여러 필드에 사용할 땐 유니크 ID + 접미사 방식으로 사용할 수도 있다.

// Multiple Fields Example via React 공식 문서
function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}

 

참고글

---

• https://github.com/facebook/react/pull/22644
• Hooks API Reference - React
• React 18 미리보기
• 리액트 v18 버전 톺아보기

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요