HTMLElement와 JavaScript 간의 상호작용을 개선하는 dataset (데이터 속성)

Frontend/JavaScript

엘리브가 2023. 4. 8. 17:54

HTML의 엘리먼트는 다음과 같이 태스 내부에 속성(Attribute) 값을 가질 수 있습니다.

<div id="foo" bar="baz"></div>

일반적인 개발 상황에서는 엘리먼트의 속성이 큰 이슈가 아닐 수 있지만, 커스텀 엘리먼트를 비롯해서 특정 엘리먼트의 속성이 컴포넌트의 형태를 결정하는 상황에서는 해당 태그가 자주 사용될 수 있습니다.

예를 들어 다음과 같은 문법은 어떤 엘리먼트의 속성 값을 읽는 것을 돕습니다.

const el = document.getElementById('foo'); // 위에 있는 예제의 엘리먼트 입니다.
console.log(el.getAttribute('bar')); // baz

하지만 다른 사람이 읽었을 때 HTML 표준에는 bar라는 속성이 있는지 확신할 수 없습니다.

예를 들면, 정말 그럴싸한 이름의 속성을 짓는다면 다른 개발자가 봤을 때 해당 속성이 사용자 지정 데이터인지 HTML 표준인지 확신하기 어렵습니다.

결정적으로, 이러한 속성 이름이 다른 속성들과 충돌할 수도 있어 (암묵적인) 네이밍 컨벤션을 따르는 등 여러 문제가 있었다고 합니다.

따라서 HTML5에서는 이러한 문제를 해결하기 위해 dataset 속성이 생겼습니다.

사용 방법은 매우 간단합니다.

속성 명을 data-*으로 지어주면 됩니다.

<div id="foo" data-hello="안녕하세요" data-age="30"></div>

HTML에서는 이런 식으로 커스텀 속성 명을 지어주도록 권장하는데, 이를 통해 많은 개발자들이 해당 속성이 사용자 정의 되었음을 인지하게 됩니다.

const el = document.getElementById('foo');
console.log(el.dataset.hello); // 안녕하세요
console.log(el.dataset.age); //30

JavaScript에서는 data-* 속성을 직접 접근하도록 돕습니다.

위 예제처럼 특정 엘리먼트의 dataset 값에 직접 접근하여 data-*의 *을 마치 객체의 값 처럼 접근하도록 돕습니다.

즉, HTML과 JavaScript의 속성으로 서로 잘 상호작용할 수 있게 됩니다.

dataset 속성은 HTML5에서 추가되었으므로 이전 버전의 브라우저에서는 지원되지 않을 수 있습니다.

따라서 호환성 문제를 고려하여 다른 방법을 사용해야 할 수 있습니다.

또, 데이터 크롤러가 태그의 속성을 읽을 수 없을 수도 있는 문제가 있다고 합니다.