data-* 속성: HTML에서 사용자 정의 데이터 다루기

1. data-* 속성 소개

HTML에서 data-* 속성은 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공합니다. 이는 HTML의 표준 속성으로, JavaScript와 연동하여 동적인 웹 애플리케이션을 개발하는 데 유용합니다. data-* 속성은 HTML에서 데이터를 보관하고, 자바스크립트를 통해 이를 쉽게 가져오고 처리할 수 있도록 도와줍니다.

2. data-* 속성 기본 사용법

data-* 속성은 data-로 시작하는 이름을 가진 속성을 정의합니다. 여기서 *는 개발자가 원하는 이름을 자유롭게 정할 수 있습니다. 예를 들어, data-user-id, data-product-name과 같이 다양한 형식으로 이름을 지을 수 있습니다.

<div data-user-id="12345" data-role="admin">
  <p>사용자 정보</p>
</div>

 

위 코드에서 <div> 요소는 data-user-id와 data-role이라는 두 개의 사용자 정의 데이터를 저장하고 있습니다. 자바스크립트에서 이 데이터에 쉽게 접근할 수 있습니다.

 

3. data-* 속성 값 가져오기 (JavaScript에서 사용)

HTML에서 정의된 data-* 속성은 JavaScript에서 dataset을 통해 접근할 수 있습니다. dataset은 HTML 요소의 data-* 속성 값을 키-값 형태로 가져올 수 있게 해줍니다.

<div id="user-info" data-user-id="12345" data-role="admin">
  <p>사용자 정보</p>
</div>

<script>
  const userInfo = document.getElementById("user-info");
  const userId = userInfo.dataset.userId; // "12345"
  const role = userInfo.dataset.role; // "admin"

  console.log(userId, role); // 출력: 12345 admin
</script>

 

위 코드에서 data-user-id와 data-role 속성에 접근하여 값을 dataset을 통해 가져옵니다. dataset은 속성명에서 data-를 제거하고, 나머지 부분을 카멜케이스로 변환하여 제공합니다. 예를 들어, data-user-id는 dataset.userId로 접근합니다.

 

4. data-* 속성 사용 예시

data-* 속성은 주로 다음과 같은 경우에 유용하게 사용됩니다:

• UI 상태 저장: 예를 들어, 사용자 인터페이스에서 특정 요소의 상태를 data-* 속성에 저장하여 동적 기능을 구현할 수 있습니다.
• 동적인 데이터 전달: 페이지나 컴포넌트의 데이터를 HTML 요소에 저장하고, 자바스크립트를 통해 이를 불러와 동적으로 처리할 수 있습니다.

<ul>
  <li data-vote-id="1" data-vote-count="20">투표 1: 20표</li>
  <li data-vote-id="2" data-vote-count="35">투표 2: 35표</li>
  <li data-vote-id="3" data-vote-count="42">투표 3: 42표</li>
</ul>

<script>
  const voteItems = document.querySelectorAll('li');
  
  voteItems.forEach(item => {
    const voteId = item.dataset.voteId;
    const voteCount = item.dataset.voteCount;

    console.log(`투표 ${voteId}: ${voteCount}표`);
  });
</script>

 

위의 예시처럼, data-* 속성을 사용하여 투표 항목의 ID와 투표 수를 저장하고, 이를 자바스크립트에서 읽어와 처리할 수 있습니다.

 

5. data-* 속성 활용 팁

• 속성명 규칙: data-* 속성명은 반드시 data-로 시작해야 하며, 이후 부분은 알파벳, 숫자, 하이픈(-)을 사용할 수 있습니다. 그러나 첫 글자는 숫자가 될 수 없으며, 대소문자를 구분합니다.
• 접근성 고려: data-* 속성은 순수한 데이터를 저장하는 용도로만 사용해야 하며, 스타일이나 UI에 영향을 미치는 값은 CSS나 JavaScript를 통해 별도로 처리하는 것이 좋습니다.
• 복잡한 데이터 처리: data-* 속성에 JSON 형식의 데이터를 저장하고 이를 JavaScript에서 파싱하여 사용하는 방법도 가능합니다. 예를 들어, 복잡한 객체를 JSON 문자열로 저장해두고, JavaScript에서 파싱하여 객체로 처리할 수 있습니다.

<div id="product" data-info='{"name":"Laptop","price":999}'>
  <p>제품 정보</p>
</div>

<script>
  const product = document.getElementById('product');
  const productInfo = JSON.parse(product.dataset.info);

  console.log(productInfo.name); // "Laptop"
  console.log(productInfo.price); // 999
</script>

 

data-* 속성은 매우 유용한 HTML 속성입니다. 데이터를 HTML 요소에 저장하고, 이를 JavaScript에서 쉽게 가져와 처리할 수 있어 동적인 웹 애플리케이션을 구축하는 데 많은 도움이 됩니다. 복잡한 데이터 구조를 저장하거나, UI의 상태를 관리하는 데 매우 적합합니다. 이를 잘 활용하면 코드의 가독성도 높이고, 관리가 쉬워질 수 있습니다.