[React v18] useId

쉬어가는 느낌으로 react18의 새로운 hook인 useId를 알아보자

react에서 uniqId를 생성해주는 hook인데
아래처럼 중복된 id를 사용하면 안될때 사용하기 좋다.
:r0, :r1 이런 형태의 id가 생성되는걸 볼수있다.

• 단, key에 해당 hook을 사용하기는 권장되지않는다

import React, { useId } from 'react'

export default function Parent() {
  return (
    <div>
        <ChildInput />
        <ChildInput />
        <ChildInput />
    </div>
  )
}

const ChildInput = () => {
    const uniqId = useId();

    return (
        <label htmlFor={uniqId}>
            label
            <input id={uniqId} />
        </label>
    )
}