HTML 데이터 속성

데이터 속성은 HTML 요소에 사용자 정의 정보를 저장하기 위한 방식이다. 속성 이름이 반드시 data-로 시작하며 다음과 같이 선언한다.

<div data-user-id="12345" data-role="admin"></div>
HTML
복사

여기서 data-user-id, data-role이 데이터 속성이다. 이 값은 DOM과 자바스크립트를 오가는 과정에서 간단한 데이터 바인딩 역할을 한다.

데이터 속성은 자바스크립트에서 dataset 객체를 통해 접근한다. 중요한 점은 HTML 속성의 케밥 케이스(kebab-case)가 자바스크립트에서는 카멜 케이스(camelCase)로 자동 변환된다는 점이다.

<div id="user" data-user-id="12345" data-role="admin"></div>
HTML
복사

const el = document.getElementById("user");
console.log(el.dataset.userId); // "12345"
console.log(el.dataset.role); // "admin"
JavaScript
복사

이 방식은 별도의 파싱 없이 바로 접근할 수 있다는 점에서 실무에서 자주 사용된다.

데이터 속성은 자바스크립트에서만 유용한 것이 아니다. CSS에서도 상태 기반 스타일을 적용하는 데 활용할 수 있다. 데이터 속성을 기반으로 스타일이 달라지는 UI를 만들 때 특히 효과적이다.

article::before {
  content: attr(data-parent);
}
CSS
복사

article[data-columns="3"] {
  width: 400px;
}
CSS
복사

CSS만으로도 데이터에 따라 레이아웃이나 표시 내용을 달리할 수 있기 때문에 단순한 동적 UI는 자바스크립트 없이 해결할 수 있다.

데이터 속성은 다음과 같은 상황에서 가장 많이 사용한다.

버튼 클릭 시 특정 id, type, 상태를 전달해야 할 때 사용한다.

<button data-product-id="p-1337">추가</button>
HTML
복사

button.addEventListener("click", (e) => {
  const productId = e.target.dataset.productId;
  addToCart(productId);
});
JavaScript
복사

DOM 구조를 불필요하게 복잡하게 만들지 않고도 필요한 데이터를 운반할 수 있다.

CSS와 dataset을 결합하면 상태 기반 스타일링을 쉽게 할 수 있다.

<div class="tab" data-active="true"></div>
HTML
복사

.tab[data-active="true"] {
  border-bottom: 2px solid black;
}
CSS
복사

자바스크립트와 CSS가 느슨하게 연결돼 유지보수가 쉬워진다.

간단한 옵션을 데이터 속성으로 전달하면 자바스크립트 초기화 코드의 복잡성이 줄어든다.

<div data-autoplay="true" data-duration="3000" class="carousel"></div>
HTML
복사

initCarousel({
  autoplay: el.dataset.autoplay === "true",
  duration: Number(el.dataset.duration)
});
JavaScript
복사

데이터 속성은 HTML 중심의 선언적 UI와 자바스크립트 초기화 코드를 자연스럽게 연결한다.

데이터 속성은 편리하지만 다음과 같은 경우에는 사용을 지양한다.

•

큰 JSON 객체를 그대로 넣는 경우

•

컴포넌트 간 복잡한 상태 공유가 필요한 경우

•

React, Vue 같은 프레임워크에서 props로 전달하는 것이 더 명확한 경우