useId

 

🎯 useId란 무엇일까?

**useId**는 React에서 고유한 ID를 자동으로 만들어주는 도구예요.
여기서 "고유하다"는 말은 다른 요소들과 겹치지 않는 ID라는 뜻이에요.

왜 필요할까요?

• HTML의 <label>과 <input>을 연결할 때,
• 여러 요소가 있는 컴포넌트에서 중복되지 않는 ID가 필요할 때,

이때 **useId**를 사용하면 고유한 ID를 쉽게 만들 수 있어요.

 

📦 택배 상자 이름표 이야기

여러분이 택배를 여러 개 보냈다고 상상해보세요. 📦
모든 상자에는 **이름표(ID)**가 붙어 있어야 하죠?

• 이름표가 없으면 상자들이 엉켜서 어디로 가야 할지 모르게 돼요.
• 이름표가 중복되면 상자가 잘못 배달될 수 있어요.

React에서도 여러 요소들이 있을 때 **"각 요소를 구분하기 위한 이름표(ID)"**가 필요해요.
이걸 **useId**가 자동으로 붙여준답니다!

 

🛠️ useId 코드 예시

간단한 예제로 설명해드릴게요. **useId**를 사용해서 <label>과 <input>을 연결하는 예제예요:

import React, { useId } from "react";

function MyForm() {
  const id = useId(); // 고유한 ID를 생성해요

  return (
    <div>
      <label htmlFor={id}>이름:</label>
      <input id={id} type="text" placeholder="이름을 입력하세요" />
    </div>
  );
}

export default MyForm;

 

🔍 코드에서 무슨 일이 일어날까?

1. useId()
   • React가 자동으로 고유한 ID를 생성해줘요.
   • 예를 들어, id 값이 "id-1234"처럼 만들어질 수 있어요.
2. htmlFor와 id
   • <label>과 <input>을 연결하기 위해 **htmlFor**와 **id**를 사용해요.
   • 이렇게 하면 화면 리더기나 접근성 도구가 label을 클릭했을 때 input에 초점을 맞출 수 있어요.
3. 결과
   • useId 덕분에 ID가 중복될 걱정 없이 안전하게 사용할 수 있어요! 😊

 

🧩 여러 개의 요소에 ID를 적용해볼까요?

여러 개의 입력창이 있어도 **useId**를 사용하면 ID 충돌이 없어요.

import React, { useId } from "react";

function MyForm() {
  const firstNameId = useId();
  const lastNameId = useId();

  return (
    <div>
      <div>
        <label htmlFor={firstNameId}>이름:</label>
        <input id={firstNameId} type="text" placeholder="이름 입력" />
      </div>
      <div>
        <label htmlFor={lastNameId}>성:</label>
        <input id={lastNameId} type="text" placeholder="성 입력" />
      </div>
    </div>
  );
}

export default MyForm;

 

🚀 useId의 장점

1. 중복 걱정 끝!
   • useId는 컴포넌트를 여러 번 렌더링해도 항상 고유한 ID를 만들어줘요.
2. 접근성 향상
   • <label>과 <input>을 정확히 연결해서 사용자 경험을 더 좋게 만들어요.
3. 편리함
   • 따로 ID를 작성하거나 관리할 필요 없이 한 줄 코드로 해결할 수 있어요.

 

🌟 한 줄 요약

useId는 React에서 중복되지 않는 고유한 ID를 자동으로 생성해주는 도구예요.
여러 요소를 구분하거나 <label>과 <input>을 연결할 때 사용하면 정말 편리해요!