[React] useId

고유 ID를 생성하기 위한 React Hook

장점

input 같은 Form요소에 접근성 관련 속성을 제공할 때 유용하다.

• useId()로 생성한 객체 한 개를 가지고 라벨과 Form요소에 매칭을 시켜줘 라벨을 클릭했을 때 해당 Form요소가 활성화 시키게 할 수 있다.

function App() {
	const id = useId();
    console.log(id) // :r0:
    
    return(
    	<div>
        	<label htmlFor="name">이름</label>
            <input id="name"/>
        </div>
    );
}

function App() {
	const id = useId();
    console.log(id) // :r0:
    
    return(
    	<div>
        	<label htmlFor={`${id}-name`>이름</label>
            <input id={`${id}-name`} />
            <br />
            <label htmlFor={`${id}-age`>나이</label>
            <input id={`${id}-age`}/>
        </div>
    );
}

• 쌍점
  • useId를 통해서 만든 id는 :을 포함하고 있기 때문에 querySelector가 잘 인식하지 못한다.
    그래서 에러가 생긴다.
  • React는 DOM요소에 접근하기 위해 ref값을 사용하고 있다. -> 굳이 querySelector를 사용할 필요가 없다.
  • React를 사용해서 개발을 할 때 querySelector 사용을 지양한다. -> useId를 통해서 React에 맞게 사용하기를 바라기? 때문이다.
• 안정성
  • 예를 들어 Math.Random()을 사용해서 id를 사용할 경우 id값이 매번 바뀌기 때문에 스크린리더를 사용하는 분들은 불편함을 호소한다.
  • 컴포넌트 렌더링이 발생해도 id값이 유지되기 때문에 안정적이다
  • SSR 컴포넌트의 경우 서버에서 렌더링 된 결과물과 클라이언트에서 렌더링 된 결과물이 다른 경우가 존재한다.
  • useId()를 사용할 경우 안정적인 id값을 생성한다.
    -> 단, 서버와 클라이언트에서 컴포넌트 트리가 동일해야한다.

Reference

React useId()
별코딩 Youtube