useId
-
고유한 아이디를 만들 때 사용하는 React Hook
-
사용방법 : import 후 호출해서 사용
-
아무런 인자도 전달받지 않기 때문에 호출하면 문자열 형태의 아이디를 하나 반환함
-
useId로 만든 ID는 input같은 form요소에 접근성에 관련된 속성을 제공할 때 유용하게 사용됨
-
input 요소에 ID속성을 제공하는 경우 많이 사용됨
-
label과 input 요소의 연관성을 코드상으로 명시해서 코드의 접근성을 높여주기
-
input요소에 id를 넣어주고, label의 htmlFor 속성에 input의 id를 그대로 넣어주기
-
이렇게 연결시켜주면 브라우저에 있는 input box를 직접 클릭하지 않고 label을 클릭해도 input box에 focus가 자동으로 들어옴 (접근성이 좋아짐)
-
웹페이지를 음성으로 읽어주는 스크린 리더도 두 요소가 연결되어있다는 것을 인지하기 때문에 음성으로 레이블을 읽어줄 수 있음(접근성이 좋아짐)
import { useId } from "react";
function UseIdHook() {
const id = useId();
console.log(id);
return (
<div>
<label htmlFor="name">이름 : </label>
<input id="name" />
</div>
);
}
export default UseIdHook;
- 재사용 가능한 컴포넌트를 만들기 위해서 MyInput이라는 컴포넌트를 만든 후, return에 작성해주기
import { useId } from "react";
function UseIdHook() {
const id = useId();
console.log(id);
return (
<div>
<MyInput />
<MyInput />
</div>
);
}
function MyInput() {
return (
<div>
<label htmlFor="name">이름 : </label>
<input id="name" />
</div>
);
}
export default UseIdHook;
- 이렇게 하면 화면에는 원하는대로 두개의 input이 생겼지만, 두 input의 id가 더 이상 고유하지 않다는 문제점이 발생함
-
두 번째에 있는 label을 클릭하면 첫 번째 input에 focus가 생김
- 문제를 해결하려면? -> 각각의 input에 고유한 id를 부여해주자 -> useId를 사용하자! -
React는 고유한 아이디를 만들어주는 useId라는 Hook을 제공함
useId 적용한 코드
import { useId } from "react";
function UseIdHook() {
return (
<div>
<MyInput />
<MyInput />
</div>
);
}
function MyInput() {
const id = useId();
return (
<div>
<label htmlFor={id}>이름 : </label>
<input id={id} />
</div>
);
}
export default UseIdHook;
-
각 input이 고유한 Id를 가지고 있음
-
두 번째 label을 클릭하면 두 번째 input에 focus가 들어옴
-
useId를 사용해서 Id를 만들면 각 컴포넌트가 고유한 아이디가 생성되어 input에 들어감
-
컴포넌트를 만들다보면 하나의 컴포넌트 안에 여러 개의 input을 담아야 할 때가 있음
- useId를 한 번만 사용해서 모든 input에 고유한 id를 줄 수 있음
-> id뒤에 다른 의미있는 문자열을 붙여주기
- 이렇게 하면 input마다 고유한 id를 부여할 수 있음
useId의 장점
1. id의 생김새
- 항상 : :을 포함하고 있음
- JavaScript를 사용해서 특정한 DOM 요소에 접근할 때 queryselector같은 API를 사용함
- 이렇게 querySelector로 input을 불러오면 유효한 Selector가 아니라는 오류가 발생함
- 요소의 id에 : :이 포함되어있으면 querySelector같은 API들이 잘 동작하지 않음
- React는 DOM요소에 접근하기 위한 ref라는 기능을 제공하고 있음
- React를 사용한다면 굳이 querySelector같은 API를 사용할 필요가 없음
- ref를 사용하려면
useRef를 사용해서 ref를 하나 만들고,
가져오고 싶은 input요소의 속성에 ref를 넣어준 후,
querySelector 대신 ref.current를 사용해서 접근을 하면 됨
- React는 여러 경우를 대비하여 설계된 ref라는 기능이 있기 때문에 querySelector를 사용하는건 좋은 방법이 아님
- 이런 의미에서 useId는 id에 : :을 넣어주어 더 나은 코드를 작성할 수 있도록 도와주는 장점이 있음
2. 안정성
- 만약 useId가 아닌 Math.rendom()을 사용해서 id를 만들면 컴포넌트가 렌더링될때마다 id가 새로운 값으로 변경됨
- 컴포넌트가 렌더링되면 컴포넌트 함수가 호출되고,
내부의 변수들도 다시 초기화가 되기 때문임 - id가 계속 바뀌면 form요소의 id가 바뀔때마다 스크린 리더가 반복적으로 레이블을 읽어주기 때문에 스크린 리더를 사용하는 사람들이 불편함을 느낄 수 있음
- useId로 만들어진 id는 컴포넌트에 렌더링이 발생해도 id가 그대로 유지되기 때문에 form요소의 id도 그대로 유지가 되기 때문에 훨씬 안정적임
3. 서버 사이드 렌더링을 사용하는 프로젝트에 유리
(안정성이 큰 역할을 함)
서버 사이드 렌더링
- 페이지를 서버에서 렌더링 한 후에 클라이언트로 전달하는 방식
- 클라이언트에서는 받아온 페이지를 하이드레이션이라는 과정을 통해 상호작용이 가능한 페이지로 렌더링 함
- 서버에서 렌더링된 결과물과 클라이언트에서 렌더링된 결과물이 일치하지 않아서 문제가 발생하는 경우가 있음
- 서버에서 렌더링된 form 요소의 id값이 클라이언트에서 렌더링된 form 요소의 id값과 일치하지 않을 때 문제가 발생함
- useId를 사용하면 서버와 클라이언트에서 모두 동일한 안정적인 id를 생성해주기 때문에 이러한 문제를 방지할 수 있음
