React - useId 라는 Hook

그놈의 ID

프로젝트를 진행하다가 input과 label을 Styled-component로 만들어주고 map으로 돌리려 했는데

각 요소들의 id 값을 부여해주는게 여간 번거롭고, 신경이 은근히 쓰인다.

useID - Hook

React에서 제공하는 useId라는 Hook이 있다라는 것을 알게 됬다.

🙄 이 useId라는 hook은 key 에 사용하지마라고 한다.

따랏서...

import useId from 'react'

const inputLabelTextId = useId(); 
const inputLabelNameId = useId();
const selectLabelId = useId();

// 이렇게 각각 고유 id를 형성 후 

<label id = { inputLabelTextId }></label>
<input id = { inputLabelTextId } />
  

<label id = { inputLabelNameId }></label>
<input id = { inputLabelNameId } />
  
<label id = { selectLabelId }></label>
<select id = { selectLabelId } />

▲ 위 처럼 pair로 짝 지어 놓으면 간단히 id에 대한 걱정은 사라지게 된다.