[Front] HTML 요소에 data 속성 사용하기 : 더 깔끔하게

 

 

 

이 글을 작성하는 이유 

 

지금까지 DB에서 데이터를 가져와서 어떻게든 어딘가에 데이터를 담아 둘라고 하였다

 

안좋은 예시

1. HTML input에 ( <input type="hidden" name="id" value="dataId"> ) 넣어 두었거나
2. 어떠한 DOM 속성 id에 ( id="dataId" ) 이런식으로 넣어 두었다.

 

이렇게 담아 두어서 하나하나 컨트롤 하려고 하다보니 코드는 어지러워지고 코드를 유지보수하는거 조차 힘들어지기 시작하였습니다.

이 때, HTML 요소의 'data-' 로 시작하는 속성을 알게 되어서 깔끔하게 해결이 되어서 공유하기 위해 작성하게 되었습니다.

 

 

 

 

 

데이터셋 사용 사례

 

apple.com

 

이렇게 Apple.com 사이트에서도 HTML DOM요소에도 data를 넣어서 사용하는 것을 볼 수 있습니다.

 

또한 이렇게도 사용할 수 있습니다. 이하 내용은 아래 예시를 가지고 하겠습니다.

<div id="product" data-category="스마트폰" data-brand="삼성전자" data-price="1000000">
  <h2>삼성전자 갤럭시 S20 스마트폰</h2>
  <p>최신 삼성전자 스마트폰으로 성능과 디자인을 만나보세요.</p>
</div>

 

 

 

 

 

데이터 추가

 

위 예시 HTML코드에서 평점(rating)을 데이터로 추가하려고 한다.

 

 

JavaScript

1. dataset 프로퍼티로 접근하여 추가
2. 일반적인 속성 변경 메서드인 setAttribute() 사용

const $product = document.getElementById('product');
 
// 방법1  (dataset 프로퍼티 접근)
$product.dataset.rating = 4.5;

// 방법2 ( setAttribute() 사용 )
$product.setAttribute('rating', 4.5);

 

jQuery

// 예시
$('#product').data(key, value)          // 데이터 저장

// 데이터 추가
$('#product').data('rating', 4.5);

 

 

 

 

 

데이터 수정

 

위 예시 HTML코드에서 가격(price)을 데이터를 수정하려고 한다.

 

 

JavaScript

1. dataset 프로퍼티로 접근하여 추가
2. 일반적인 속성 변경 메서드인 setAttribute() 사용

const $product = document.getElementById('product');
 
// 방법1  (dataset 프로퍼티 접근)
$product.dataset.price = 1200000;

// 방법2 ( setAttribute() 사용 )
$product.setAttribute('price', 1200000);

 

jQuery

// 데이터 수정
$('#product').data('price', 1200000);

// 예시
$('#product').data('exist Data', '수정할 데이터');

 

 

 

 

 

데이터 삭제

 

위 예시 HTML코드에서 평점(rating)을 데이터를 삭제하려고 한다.

 

JavaScript

1. delete 를 사용하여 객체 속성을 삭제
2. 일반적인 속성 제거 메서드인 removeAttribute() 사용

const $product = document.getElementById('product');
 
// 방법1  (dataset 프로퍼티 접근)
delete $product.dataset.rating;

// 방법2 ( removeAttribute() 사용 )
$product.removeAttribute('rating');

 

jQuery

// 데이터 추가
$('#product').removeData('data-rating');

// 예시
$('#product').removeData(key);

 

 

 

 

 

 

 

 

 

 

 

 

CSS와 JS 데이터셋 활용

 

"속성" 선택자는 [] 이렇게 사용하였다.

HTML 요소안에 "data-"도 속성이기 때문에 이 선택자를 이용할 수 있는 것이다.

 

jQuery

<!-- 모든 div태그 중에서 data-brand속성이 삼성전자인 요소를 선택 -->
<script>
    $('div[data-brand="삼성전자"]')              
</script>

 

CSS

<style>	
    /*  모든 div태그 중에서 data-brand속성 요소를 선택 */
    div[data-brand] { /*생략*/ }

    /*  모든 div태그 중에서 data-brand속성이 삼성전자인 요소를 선택 */
    dis[data-brand="삼성전자"] { /* 생략 */ }

</style>

 

 

 

 

 

데이터셋 주의사항

 

검색 엔진 수집 유의사항

기본적으로 HTML의 데이터 속성은 검색엔진에서 인덱싱을 하지 않습니다.!

따라서 검색 엔진에 노출할 내용이나, 태그에 넣어야할 컨텐츠를 데이터 셋 송성으로 표시하면 수집이 안되니 조심해야한다.

 

 

보안 문제

dataset을 사용하여 클라이언트 측에서 데이터를 저장하면 보안에 취약할 수 있습니다.

따라서 중요한 데이터나 보안에 민감한 정보는 서버 측에서 관리하고 보여줘도 되는 데이터만 내려주도록 합니다.

 

 

브라우저 호환성

dataset은 HTML5부터 지원 되기 때문에 오래된 브라우저에서는 제대로 동작하지 않을 수 있습니다.

따라서 프로젝트의 브라우저 호환성을 고려하여 사용할 수 있도록 설계해야 합니다.

 

 

관례

dataset의 키 이름은 반드시 하이픈(-)을 사용하여 작성해야 합니다.

예를 들어, data-product-category와 같은 형식이 올바르고, dataProductCategory와 같은 형식은 사용할 수 없습니다.

 

 

 

 

 

감사합니다.