HTML 태그 속성에 데이터를 저장할 수 있다?

html에는 데이터를 저장할 수 있는 속성을 제공한다. 은근히 유용하게 사용되는 해당 기능을 알아 보도록 하자.

data 속성을 사용하는 경우

일단 해당 속성을 사용하기 전에 "이걸 어디에 사용하는데요?"라는 질문을 해소하는 것이 좋을 것 같다.

data-속성은 사용하기 매우 쉽고 간단하다. 특히, JS뿐만 아니라 CSS에서 data 속성의 값을 가져올 수 있다는 것이 큰 장점이였다.

나는 사이드 프로젝트에서 해당 기능을 다음과 같은 경우에 사용했다.

• css에서 :before 선택자에 content속성을 태그의 데이터에 맞게 동적으로 설정하기 위해 사용

이 뿐만 아니라 간단한 데이터를 태그에 삽입하여 사용하는 것은 자유도가 높다. 따라서, 사용할 수 있는 곳이 매우 다양할 것이다.

사용법

html 태그에 data- 속성을 사용하면 커스텀 데이터를 저장할 수 있다.

html

<div data-user-name="홍길동" class="component">
	// 자식 컴포넌트 또는 태그
</div>

css에서 가져오기

.component:hover::before {
	...
    content: attr(data-user-name)"님의 컴포넌트" 
    ...
}

js에서 가져오기

const component = document.querySelector(".component");

const user_name = component.dataset.userName;
console.log(user_name); // 홍길동

주의사항

data-속성은 다음과 같은 단점을 가지고 있다. 정말 필요한 곳에 사용하는 것을 권장한다.

접근성

• data 속성은 누구나 볼 수 있기 때문에 중요한 정보를 담지 않아야 한다.
• 검색 엔진이 data-를 인덱싱 하지 못하여 SEO에 지장을 준다.

호환성

• IE 10버전 이하는 .dataset을 지원하지 않아 getAttribute()를 사용해야 한다.
• 메모리에서 JS 객체를 읽는 것 보다 읽기 성능이 낮다.

특히나 JSX에서 map으로 data-속성의 사용을 남용하는 경우, 많은 데이터를 저장하는 경우는 DOM이 커지기 때문에 파싱과 렌더링 성능이 저하된다.

적절한 상황에만 data-속성을 사용하도록 하자.