[React] useId 이거 언제쓰지...싶을 때. (사용 예시)

React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다.

딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다.

오늘 사용 했었는데,

input과 label을 연결해줄 때 사용했다.

 

component 중 일부의 코드다.

아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다.

생각보다 유용했다.

  const connectionId = useId();
  const [isChecked, setIsChecked] = useState(checked);

  return (
    <div>
      <input
        id={connectionId}
        type="checkbox"
        checked={isChecked}
        disabled={disabled}
      />
      <label
        htmlFor={connectionId}
      >
	  {...}
      </label>
    </div>
  );

 

 

참고

useId – React

 

useId – React