[React] htmlFor, useId

html 에서 사용하던 for

<label for="inputstr">
 <input type="text" id="inputstr" value="input"/>
inputstr
</label>

 

React에서 사용할 경우

react는 JSX를 사용하기 때문에 자바스크립트의 for예약어와 겹친다. 그래서 htmlFor를 사용한다. 

label과 input을 연결해야 할 때 htmlFor을 사용하여 연결한다. 

➡️ 연결시, label을 클릭했을 경우 input에 자동적으로 focus를 해준다. 

• label에서는 htmlFor을, Input에서는 id를 동일하게 부여하면 끝

userId

접근성 속성에 전달할 수 있는 고유한 Id를 생성하기 위한 훅

같은 컴포넌트를 여러개 사용시, Dom 의 id가 중복이 되는 문제가 생겨난다. 

그래서 useId는 컴포넌트의 고유한 ID를 생성하여 고유 ID를 생성해주어 해당 문제를 해결해준다. 

• 컴포넌트 최상단에 호출해주기

import { useId } from 'react';

export default function Form() {
  const id = useId();
  return (
    <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>
  );
}

id값을 하드코딩 하지 않고, useId를 통해 id 값을 부여하면 Dom이 렌더링할 때 충돌이 방지되어 오류가 발생하지 않게 된다.

 

 

---

https://velog.io/@narcoker/React-useId-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0

[React] useId 파헤치기