useId

react 의 따끈따끈한 hook 을
설명해 드리겠습니다.

 

useId

React 18 version 으로 출시된 따근따근한 hook 입니다. useId 는 고유한 id 를 만들고 싶을 때 사용하면 됩니다.

function App() {
	const id = useId();
	console.log(id); // :r0:
}

useId 는 input 의 label 로 사용하는 경우가 있습니다.

아래 코드가 예시 코드 입니다.

import { useId } from "react";

function MyInput() {
  const id = useId(); 
  return (
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id}/>
    </div>
  )
}

function App() {
  return (
    <div>
      <MyInput/>
    </div>
  )
}

 

하지만 굳이 useId 를 왜 써야 할지 의문을 품을 수 있습니다. 간단하게 math.random() 으로 id 값을 랜덤으로 주거나 임의로 1,2,3 이라는 숫자를 넣거나 password, username 이라고 명시적으로 이름을 넣을 수 있겠죠. 

만약 한 페이지에 두개 이상의 공통된 input component 를 써야 한다면 label 을 클릭했을 때 엉뚱한 input 에 focus 가 맞춰지는 경우가 생길 수 있습니다.  그러한 이유는 밑에 코드처럼 어떤 label 이 어떤 input 에 해당하는지 알 수 없기 때문입니다.

import { useId } from "react";

function MyInput() {
  const id = math.random(); // 이러면 서버 비용도 발생 
  return (
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id}/>
    </div>
  )
}

function App() {
  return (
    <div>
      <MyInput/>
      <MyInput/>
    </div>
  )
}

 

만약 id 값을 math.random() 으로 만들고 있다면 컴포넌트가 리렌더링 될때마다 id 값이 바뀌기 때문에 불필요한 서버 비용이 발생하기 때문에 useId() 로 설정을 하면 리렌더링해도 id 값이 바뀌지 않습니다.

 

import { useId } from "react";

function MyInput() {
  const id = useId(); 
  return (
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id}/>
    </div>
  )
}

function App() {
  return (
    <div>
      <MyInput/>
      <MyInput/>
    </div>
  )
}