data-* 속성은 언제 사용해야 할까? (HTML 커스텀 데이터 속성 완전 정리)

HTML을 작성하다 보면 요소에 추가 정보를 저장해야 하는 경우가 있습니다.

예를 들어 특정 버튼에 상품 ID를 저장하거나, JavaScript에서 사용할 데이터를 HTML에 미리 넣어두고 싶은 상황이 있을 수 있습니다. 이런 경우에 사용할 수 있는 기능이 바로 data-* 속성입니다.

data-* 속성은 HTML5에서 도입된 기능으로, HTML 요소에 사용자 정의 데이터를 저장할 수 있도록 만들어진 속성입니다.

이 속성을 활용하면 HTML 구조를 유지하면서도 JavaScript와의 연동을 훨씬 쉽게 만들 수 있습니다.

이번 글에서는 data-* 속성이 무엇인지, 그리고 언제 사용하는 것이 좋은지, 마지막으로 실무에서 활용하는 방법까지 정리해보겠습니다.

data-* 속성이란 무엇인가?

data-* 속성은 HTML 요소에 사용자 정의 데이터를 저장하기 위한 속성입니다.

이름 그대로 data 뒤에 하이픈(-)을 붙이고 원하는 이름을 작성하면 됩니다.

예를 들어 다음과 같은 형태로 사용할 수 있습니다.

<div data-id="123">상품</div>

위 코드에서는 data-id라는 속성에 값 123이 저장되어 있습니다. 이 데이터는 HTML에서 직접 사용할 수도 있고, JavaScript를 통해 쉽게 접근할 수도 있습니다.

data-* 속성을 사용하는 이유

1. HTML에 추가 정보를 저장할 수 있다

웹페이지를 만들다 보면 특정 요소에 추가 정보를 저장해야 하는 경우가 많습니다.

예를 들어 쇼핑몰 페이지에서는 상품 ID나 카테고리 정보 같은 데이터를 HTML 요소에 함께 저장해야 할 수 있습니다.

예시 코드

<button data-product-id="1001">장바구니 담기</button>

이처럼 data-* 속성을 사용하면 HTML 구조를 변경하지 않고도 필요한 데이터를 함께 저장할 수 있습니다.

2. JavaScript와의 연동이 쉬워진다

data-* 속성은 JavaScript에서 쉽게 읽고 사용할 수 있다는 장점이 있습니다.

예를 들어 다음과 같은 JavaScript 코드를 사용할 수 있습니다.

const button = document.querySelector("button");
console.log(button.dataset.productId);

dataset을 사용하면 HTML에 저장된 data-* 값을 간단하게 가져올 수 있습니다. 이 기능 덕분에 동적인 인터랙션을 구현할 때 매우 유용합니다.

3. HTML 구조를 깔끔하게 유지할 수 있다

예전에는 HTML 요소에 정보를 저장하기 위해 class 이름이나 id 값을 활용하는 경우가 많았습니다.

하지만 이러한 방식은 코드 가독성을 떨어뜨릴 수 있습니다.

data-* 속성을 사용하면 데이터와 스타일을 구분할 수 있기 때문에 HTML 구조가 훨씬 깔끔해집니다.

data-* 속성 사용 예시

상품 정보 저장

쇼핑몰에서 상품 정보를 저장하는 예시입니다.

<div class="product" data-id="101" data-price="20000">
상품 정보
</div>

이 경우 JavaScript에서는 다음과 같이 데이터를 사용할 수 있습니다.

const product = document.querySelector(".product");
const price = product.dataset.price;
console.log(price);

이렇게 하면 HTML에 저장된 데이터를 JavaScript에서 쉽게 활용할 수 있습니다.

버튼 이벤트 처리

버튼 클릭 이벤트에서도 data-* 속성이 자주 사용됩니다.

<button data-action="delete">삭제</button>
<button data-action="edit">수정</button>

JavaScript에서는 다음과 같이 사용할 수 있습니다.

document.querySelectorAll("button").forEach(button = {
  button.addEventListener("click", function() {
    const action = this.dataset.action;
    console.log(action);
  });
});

이 방식은 버튼 기능을 구분할 때 매우 편리합니다.

data-* 속성을 사용할 때 주의할 점

1. 너무 많은 데이터를 저장하지 않기

data-* 속성은 간단한 정보를 저장하는 데 적합합니다. 하지만 대량의 데이터를 HTML에 직접 저장하는 것은 좋지 않습니다.

2. 의미 있는 이름 사용하기

data-* 속성 이름은 역할을 명확하게 표현하는 것이 좋습니다.

예시

좋은 예 : data-product-id
좋지 않은 예 : data-a

3. CSS 스타일용으로 사용하지 않기

data-* 속성은 데이터 저장을 위한 용도이며, 스타일 제어는 class를 사용하는 것이 좋습니다.