HTML5 의 data-attr를 잘 활용해보기

jQuery는 많이 사용하는 자바스크립트 라이브러리로 간편하게 DOM을 선택할 수 있는 파워풀한 기능을 제공해줍니다. HTML5 부터 적용이 되는 내용으로 jQuery를 기반으로 data라는 함수를 제공해줍니다. 이 글은 아래의 링크에서 참조를 하여 작성한 글입니다. 

https://www.nextree.co.kr/p10155/

jQuery: data() 이해와 활용

 

1. data() 를 쓰는 이유와 사용 방법

HTML Tag 들중에 data-id 와 같은 prop의 형태로 들어있는 코드들을 종종 사용할 때가 있습니다. 왜 이런 코드를 사용하냐면 많은 MultiRow의 데이터들은 태그마다 각각의 id 값 또는 key 값을 가지고 있을 때 그 데이터를 화면에서 사용가능한 데이터로 전환이 가능합니다. foreach문을 수행하면서 모두 같은 클래스와 같은 알고리즘을 가지고 있겠지만, 데이터값은 모두 제각각 다릅니다. 이런 점을 보완하기 위해서 각각의 태그마다 다른 데이터를 표시해주기 위해 사용합니다. 

<div id="div-id-1"></div>

// $('#div-id-1') 가 선택자가 됩니다.

하지만 위의 경우는 오로지 $('#div-id-1') 로 선택이 가능하고, id 값을 가져올 수 있지만 해당 태그 안에 데이터는 존재하지 않습니다. 즉, 데이터를 set해주지 않는 이상 div 태그는 그저 빈 껍데기일 뿐입니다.

 

<div id="div-id-1" data-attr-id="255" data-address="서울특별시 강남구" data-user-id="51511"></div>

위의 경우는 사용자 레벨에서 보여지는 데이터가 없지만 충분히 활용가능한 데이터가 'attrId', 'address', 'userId' 로 총 3개의 데이터를 가질 수 있게 됩니다. 이는 각각 아래와 같이 사용할 수 있습니다. 

const div = $('#div-id-1');
div.data('attrId'); // 255
div.data('address'); // 서울특별시 강남구
div.data('userId'); // 51511

 

2. 사용조건

태그마다 'data-' 로 시작하는 Property 를 달아주어야 합니다.

<div id="div-id-1" data-attr-id="255" data-address="서울특별시 강남구" data-user-id="51511" class="button"></div>

$('#div-id-1').data('class'); === undefined

 

3. 반환값

'$(selector).data(key) 로 가져온 데이터는 모두 String 타입을 갖습니다. 

const div = $('#div-id-1');
div.data('attrId') === '255'; // true
div.data('address') === '서울특별시 강남구'; // true
div.data('userId') === 51511; // false

// '===' 는 타입까지 같아야만 true

 

4. 데이터 삭제

태그 내에 존재하는 데이터가 활용되었고, 해당 화면에서 더 사용하지 않으려면 $(selector).removeData(key) 로 데이터를 삭제할 수 있습니다.

 

5. 활용예시

$('.btn-call-user-info').on('click', function() {
   let userId = $(this).data('attrId');
   return Ajax.get(`/api/user/${userId}`);
});