728x90
반응형
useId의 탄생 배경
react에서는 컴포넌트의 상태를 변경할 때마다 렌더링이 발생하므로, ID를 생성하기 위해 일반적인 JS 변수를 사용하면 ID가 매번 재생성될 수 있습니다.
이러한 문제점을 해결하기 위해 고유한 ID를 생성할 수 있는 useId 훅이 도입되었습니다.
물론 유니크한 id가 있는 경우에는 굳이 useId를 사용할 필요는 없습니다. 유니크한 id가 없을 때만 해당 훅을 사용하면 됩니다.
useId Hook
useRef를 사용하여 이전 ID를 저장하고, 다음 ID를 계산하여 반환합니다.
이렇게 생성된 ID는 컴포넌트의 내부에서만 사용되며, 외부에 노출되지 않습니다.
주의할 점은 useId Hook의 반환값을 key를 위해서는 사용하지 않아야 합니다.
예제
해당 링크에서 확인해보면 더 쉽게 useId의 장점을 파악해볼 수 있습니다.
UserInput.tsx에서 useId를 사용하여 id를 작성해줬을 때는 고유한 id가 생성되기 때문에 id가 중복되는 현상이 사라져, label을 클릭했을 때 클릭한 label의 input에 focus가 갑니다.
하지만, useId를 사용하지 않았을 경우에는 모든 label이 같은 id를 가지기 때문에 무조건 제일 첫 번째 id에 focus가 가게 됩니다.
참고자료
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
728x90
반응형
'React' 카테고리의 다른 글
| [react] 검색어 입력마다 API가 호출되지 않도록 API 호출 횟수 줄이는 법 (2) | 2023.05.12 |
|---|---|
| React 렌더링과 최적화 + React.memo로 재사용여부 판단하기 (0) | 2023.05.07 |
| [react] useCallback Hook + 예제 (0) | 2023.04.27 |
| [react] useEffect Hook + 예제 (0) | 2023.04.26 |
| [react] useReducer Hook + 예제 (0) | 2023.04.26 |
댓글