[React] useID: 접근성 속성을 위한 고유 ID 생성

📌 useId

const id = useId()

 

: 접근성 어트리뷰트에 전달할 수 있는 고유 ID를 생성하는 React Hook

• 컴포넌트의 최상위에서 호출하여 고유 ID를 생성
• 고유 ID 문자열을 반환
• useId를 리스트의 key를 생성하기 위해 사용하면 안 된다❌

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

 

 

• 접두사 지정하여 사용하기도 함('my-first-app-', 'my-second-app-')

import { createRoot } from 'react-dom/client';
import App from './App.js';

const root1 = createRoot(document.getElementById('root1'), {
  identifierPrefix: 'my-first-app-'
});
root1.render(<App />);

const root2 = createRoot(document.getElementById('root2'), {
  identifierPrefix: 'my-second-app-'
});
root2.render(<App />);

 

 

 

예제) 검색 컴포넌트

function UserSearchBox({ searchTerm, onSearch }) {
  // UsersPage의 input 검색어와 검색 이벤트 핸들러 함수 가져옴

  // 접근성을 위한 고유 ID 생성(useID API)
  const id = useId();


  // 검색 버튼 이벤트 핸들러1
  const handleSearch = () => {
    const input = document.getElementById(id);

    // input 검색어의 양 옆 공백 제거
    // - input.value === defaultValue(= searchTerm)
    const value = input.value.trim();

    // 검색 이벤트 핸들러 함수2에 input 검색어(value) 전달
    onSearch?.(value);
  };

  return (
    <div className="UserSearchBox">
      <div className="control">
        <label htmlFor={id}>사용자 검색</label>
        <input
          id={id}
          defaultValue={searchTerm}
          type="search"
          placeholder="사용자 이름 입력"
        />
      </div>
      <button type="button" onClick={handleSearch}>
        찾기
      </button>
    </div>
  );
}

export default UserSearchBox;

 

---

 

useId – React