배우게 된 배경

• cypress를 사용하며 항상 class로 요소를 찾았다.
• 하지만 tailwind CSS를 적용하며 클래스 이름이 엉망 진창이 되었고, 더 쉽게 찾을 수 있는 방법을 찾던 중 data- 속성을 발견했다.
• 결과적으로 cy.get('[data-value="3"]'), cy.get('[data-value="3"] [data-value="hungry"]') 처럼 class이름 없이 한 방에 가져다 쓸 수 있어 편해졌다.

data- 속성

• data-로 시작하는 HTML의 변수와 같은 속성
• data-value, data-amugeona 등 뒤에 오는 이름은 마음대로 지정 가능하다.
• 값도 아무렇게나 지정 가능하나 웬만하면 고유값을 주는게 변수로서 의미가 있지 않나 싶다.

data- 속성의 장점

• 코드를 직관적으로 확인할 수 있게 해준다는데 사실 cypress 이전에는 한 번도 사용해 본 적도 없고, 쓸 일이 없었다. 필요가 있나 싶다.

data- 속성의 값

<!-- 객체 형태로 된 문자열 데이터셋 -->
<div data-person='{"name": "Chris Coyier", "job": "Web Person"}'></div>

<!-- 배열 형태로 된 문자열 데이터셋 -->
<div data-fruit='["apple", "banana", "melon"]'></div>

• 객체와 배열도 가능하다.

JS에서 data- 다루기

<div id="post" data-columns="3" data-title="javascript" data-index-number="123">
  ...
</div >

const $div = document.getElementById('post');
 
// 일반적인 객체 속성 접근
$div.dataset.columns // "3"

// 배열 인덱스로 접근
$div.dataset['title'] // "javascript"

// data-index-number에서 dataset.indexNumber로 변환
$div.dataset.indexNumber // "12314"

const $div = document.getElementById('post');
 
$div.getAttribute('data-columns') // "3"

$div.getAttribute('data-title') // "javascript"

$div.getAttribute('data-index-number') // "12314"

• IE 처럼 dataset이 지원되지 않으면 getAttribute를 써야하지만 고인이 되었으니 편하게 dataset 사용하자
• html에서의 data- 속성을 js에서는 camelCase로 써야한다.

데이터셋 추가하기

• 객체에 추가하듯이 $div.dataset.변수 = 값 해주면 된다.
• $div.setAttribute('data-comments', '10') 이런 식으로도 가능하다.

데이터셋 삭제

const $div = document.getElementById('post');

delete $div.dataset.title; // delete 키워드로 객체 속성 삭제

$div.removeAttribute('data-comments');

데이터셋 리스트 보기

$div.dateset으로 모든 data- 속성 확인이 가능하다.

참고 사이트

• https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%85%8Bdata-%EC%86%8D%EC%84%B1