Dataset 속성

dataset속성이란?

HTML 요소에 특정 구별값을 주기위해 사용하는 속성이다. 각 요소 별로 가지는 특정 구별값을 함수를 인자로 사용하거나, id나 classname 외 구별되는 커스텀값이 필요할 경우 사용한다. 뿐만 아니라 데이터 속성은 브라우저에 자유롭기 때문에 요소에 특정한 데이터를 저장하고 싶을 때 유용하다.

나의 경우 onClick이벤트를 가지는 각 요소들의 event.target값을 가지기 위해 data-set을 사용하였다.(처음엔 event.target값으로 각 요소별로 각각 다른 class name을 설정하였지만, 기능은 구현될지라도 class name 본연의 기능으로 사용한 것이 아니기 때문에 바람직하지 않다는 피드백을 받았었다.)

만드는 공식은 data-속성명="속성값"으로 간단하다.
예시 코드를 통해 살펴보자.

• 각 div 요소는 onClick 이벤트를 가지며, onClick시 styleChange라는 함수를 통해 productFits의 state값이 event.target.dataset.category로 setState되는 예시이다.
• category가 속성명이고 파리폴로, 레귤러핏, 슬림핏 등이 속성값이다.
• JS에서 dataset을 가져오는 방법은 'dataset.속성명'이다.

###HTML요소로서 CSS에서도 접근이 가능하다.

• 각 요소별 선택자로서 dataset을 사용할 수 있다.

참고사이트 : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes