Attribute ID

A guide on creating and managing HTML attribute IDs effectively for better DOM manipulation and styling

July 21, 2023

#react#html

html에서 요소와 요소를 연결 할 때 고유한 ID를 만들어 연결시킵니다.
대표적으로 많이 사용하는 예시는 아래와 같습니다.

// label , input 요소를 userId로 연결
<label for="userId">
  User id:
  <input id="userId" type="text" aria-describedby="userHindId" />
</label>
// input, p 요소를 userHindId로 연결
<p id="userHindId">User ID of minimum length is 12 characters.</p>

aria-describedby 이란? aria-describedby 속성은 웹 접근성의 한 종류로 요소에 대한 설명을 명시합니다.
이 속성은 브라우저에서 voiceOver와 같은 접근성 보조 장치에 대한 동작을 보장해 줍니다.

보통 개발을 할때에 데이터의 ID 또는 기능명으로 ID를 명시하는 경우가 많습니다.
데이터의 ID를 속성의 ID로 그대로 사용 했을때에는 문제가 발생 할 수 있습니다.
데이터가 한 화면에서 두곳 이상에서 표현된다면 데이터의 아이디가 겹쳐지게 되고 이것은 문제로 이어 집니다.
또는 하나의 화면을 두개 이상의 어플리케이션으로 화면을 구성 한다면 ID가 충돌 할 확률이 더 높아집니다.
이 문제를 해결하는 방법은 3가지 단계로 나뉩니다.

  1. 어플리케이션 단위의 prefix 지정
  2. feature 단위의 prefix 지정
  3. Attribute id 생성함수 사용
// app0 -> 어플리케이션, loginForm -> 기능, 0 -> 자동 생성 아이디
<label for="app0-loginForm-0">
  <input id="app0-loginForm-0" />
</label>

이렇게 어플리케이션, 기능 그리고 자동 생성된 어플리케이션 내에서 고유한 아이디를 조합하면 더 이상 ID가 충돌 할 걱정을 하지 않아도 됩니다.
이런 문제들을 React에서는 userId 훅은 이용해서 해결 할 수 있으며, 다른 라이브러리 내에서는 생성 함수를 직접 만들어 쉽게 해결 할 수 있습니다.