data-* 속성 및 dataset 속성에 대한 정리

data- 속성 (Data Attribute)

• HTML 요소에 사용자 정의 데이터를 저장하기 위한 속성입니다.
• data- 접두사로 시작하며, 브라우저는 이 접두사를 통해 사용자 정의 속성임을 인식합니다.
• HTML 요소와 데이터를 연결하거나, JavaScript 코드의 복잡성을 줄이는 데 사용됩니다.
• CSS 속성 선택자를 사용하여 스타일을 적용할 수 있습니다.
• data-target-id와 같이 하이픈(-)으로 구분된 속성 이름은 JavaScript에서 dataset 속성을 통해 접근할 때 카멜 케이스로 변환됩니다. (예: element.dataset.targetId)

dataset 속성

• HTML 요소의 모든 data-* 속성을 키-값 쌍으로 갖는 DOMStringMap 객체를 반환하는 JavaScript 속성입니다.
• data-* 속성 값에 접근하고 조작하는 데 사용됩니다.
• data- 접두사를 제거하고, 하이픈(-)으로 구분된 이름은 카멜 케이스로 변환하여 사용합니다.
• 브라우저가 data- 접두사를 기반으로 데이터 속성을 인식하고 처리하므로, 접두사를 변경하면 dataset 속성을 사용할 수 없습니다.

카멜 케이스 변환 규칙

카멜 케이스(Camel Case)는 프로그래밍에서 변수, 함수, 객체 등의 이름을 지을 때 사용하는 명명 규칙 중 하나이다.

마치 낙타의 등처럼 중간에 대문자가 솟아 있는 모양과 비슷하다고 해서 카멜 케이스라는 이름이 붙었다.

 

카멜 케이스 변환 규칙:

1. data- 접두사 제거:
   • HTML 속성 이름에서 data- 접두사를 제거한다.
2. 하이픈(-) 기준 단어 분리:
   • 하이픈(-)을 기준으로 단어를 분리한다.
3. 첫 번째 단어는 소문자 유지:
   • 첫 번째 단어는 그대로 소문자를 유지한다.
4. 이후 단어 첫 글자 대문자 변환:
   • 두 번째 단어부터는 각 단어의 첫 글자를 대문자로 변환한다.
5. 단어 연결:
   • 변환된 단어들을 연결하여 JavaScript 속성 이름을 생성한다.

HTML 속성 이름	JavaScript 속성 이름	설명
data-user-name	userName	user (첫 번째 단어, 소문자 유지) + Name (두 번째 단어, 첫 글자 대문자 변환)
data-product-price	productPrice	product (첫 번째 단어, 소문자 유지) + Price (두 번째 단어, 첫 글자 대문자 변환)
data-is-logged-in	isLoggedIn	is (첫 번째 단어, 소문자 유지) + Logged (두 번째 단어, 첫 글자 대문자 변환) + In (세 번째 단어, 첫 글자 대문자 변환)
data-calculate-total-amount	calculateTotalAmount	calculate (첫 번째 단어, 소문자 유지) + Total (두 번째 단어, 첫 글자 대문자 변환) + Amount (세 번째 단어, 첫 글자 대문자 변환)
data-message-dialog	messageDialog	message (첫 번째 단어, 소문자 유지) + Dialog (두 번째 단어, 첫 글자 대문자 변환)
data-very-long-attribute-name	veryLongAttributeName	very (첫 번째 단어, 소문자 유지) + Long (두 번째 단어, 첫 글자 대문자 변환) + Attribute (세 번째 단어, 첫 글자 대문자 변환) + Name (네 번째 단어, 첫 글자 대문자 변환)

주요 내용 요약

• data-* 속성은 HTML 요소에 사용자 정의 데이터를 저장하고 JavaScript에서 활용하기 위한 속성이다.
• dataset 속성은 JavaScript에서 data-* 속성 값에 접근하고 조작하는 데 사용된다.
• data-* 속성 이름은 JavaScript에서 dataset 속성을 통해 접근할 때 카멜 케이스로 변환된다.
• data- 접두사를 변경하면 dataset 속성을 사용할 수 없으므로, 표준 규칙을 따르는 것이 좋다.

실 사용 예시

<div class="tab-menu">
  <button data-tab-id="tab1" class="tab-button active">탭 1</button>
  <button data-tab-id="tab2" class="tab-button">탭 2</button>
  <button data-tab-id="tab3" class="tab-button">탭 3</button>
</div>

<div class="tab-content">
  <div id="tab1" class="tab-panel active">탭 1 내용</div>
  <div id="tab2" class="tab-panel">탭 2 내용</div>
  <div id="tab3" class="tab-panel">탭 3 내용</div>
</div>

data-tab-id="tab1" 로 속성을 부여함 여기서 tab1은 문자열이지만 숫자, 불리언, JSON 객체 등 다양한 데이터 타입을 사용할 수 있다.

 

여기서 data-tab-id="tab1"의 tab1 속성을 반환하려면 아래와 같은 코드를 사용해야한다.

const tabButton = document.querySelector('[data-tab-id="tab1"]');

if (tabButton) {
  const tabId = tabButton.dataset.tabId;
  console.log(tabId); // 출력: tab1
} else {
  console.log("data-tab-id가 tab1인 요소를 찾을 수 없습니다.");
}

여기서 

const tabId = tabButton.dataset.tabId; 에서 변수 tabId와 tabButton.dataset.tabId;의 속성 .tabId가 이름이 똑같아서 헷갈릴 수 있는데 변수 이름은 뭐로 바꾸든 상관없다.

 

data-tab-id="tab1"에서

• data-tab-id: 속성 이름(Attribute Name)
• tab1: 속성 값(Attribute Value)

이다.

 

이벤트 위임을 사용하는 법

const tabMenu = document.querySelector(".tab-menu");

tabMenu.addEventListener("click", function (event) {
  const target = event.target;

  if (target.dataset.tabId === "tab1") {
    console.log(target.dataset.tabId); // 출력: tab1
  }
});