[HTML] data- 속성

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다.

Summary

	data-
카테고리	HTML 속성
역할	DOM 자체에 추가적인 데이터 저장
목적	적절한 속성이 없거나 사용자정의 데이터를 비공개로 저장하기 위해 사용
주의	요즘에는 사용자가 브라우저의 inspect 기능을 사용하여 쉽게 수정할 수 있어 사용을 권장하지 않음

---

JavaScript 프레임워크가 인기 있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티 등의 조작 없이, DOM 자체에 추가적인 데이터를 저장하기 위해 data-속성을 사용했다. 이는 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자정의 데이터를 비공개로 저장하기 위한 것이다.

요즘에는, data-속성을 사용하는 것을 권장하지 않는다. 그 이유 중 하나는 사용자가 브라우저의 inspect 기능을 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것이다. 데이터 모델은 JavaScript 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 낫다.

<div data-username="john_doe">John Doe</div>

const element = document.querySelector('div');
const username = element.getAttribute('data-username');
console.log(username); // 출력: "john_doe"

참고

• W3, Custom Data Attribute
• 프론트엔드 인터뷰 핸드북, data- 속성은 무엇에 좋은가요?