HTML data attribute

사용법

data- 접두사를 사용하여 속성을 정의하며, 접두사 다음에 원하는 이름으로 네이밍한다. 이 이름을 통해 JavaScript에서 해당 데이터를 접근할 수 있게 된다.

<div data-id="123">This is a div with custom data</div>

활용

JavaScript

const divElement = document.querySelector('div')
const id = divElement.dataset.id
console.log(id) // "123"

CSS

[data-id='123'] {
  background-color: lightblue;
}

장점

• 유연한 데이터 저장: data 속성을 사용하면 HTML 요소에 추가 데이터를 연결하여 더 많은 정보 저장
• JavaScript와의 통합: dataset 객체를 통해 data 속성에 접근할 수 있어, 동적으로 데이터를 관리
• 스타일링에 활용: 특정 데이터 값을 가진 요소에 스타일을 적용할 수 있어 유연한 스타일링 제공

예시

<ul>
  <li data-item="apple">Apple</li>
  <li data-item="banana">Banana</li>
  <li data-item="orange">Orange</li>
</ul>

const items = document.querySelectorAll('li')
items.forEach((item) => {
  const itemName = item.dataset.item
  console.log(`You selected: ${itemName}`)
})

data 속성은 유용하고 강력한 기능이지만 몇 가지 주의할 점과 단점도 있다.

주의할 점

• 가독성 유지: data 속성을 남용하면 HTML 코드가 복잡해지고 가독성이 떨어질 수 있다.
• 접근성 고려: data 속성으로 저장한 정보가 접근성을 해치지 않도록 주의해야 한다.

단점

• 의존성 문제: data 속성은 JavaScript나 CSS에서 접근할 수 있기 때문에, JavaScript와 CSS 코드 간에 의존성 문제가 발생할 수 있다. 이로 인해 코드 유지 보수가 어려울 수 있다.
• 데이터 처리의 복잡성: data 속성을 사용하면 데이터를 HTML에 적절하게 분리하기 어려울 수 있다. 데이터 처리를 위해 서버나 상태 관리 라이브러리 등 다른 기술을 고려하는 것이 좋다.
• 속성 명 충돌: data 속성은 사용자 정의 속성이므로 HTML 표준과 충돌하지 않게 주의해야 한다. 브라우저에 따라 다르게 해석될 수 있다.
• 보안 문제: data 속성에 저장되는 정보는 클라이언트 측에서 쉽게 확인할 수 있다. 따라서 보안에 민감한 정보는 data 속성에 저장하지 않는 것이 좋다.