데이터 속성

HTML요소에 'data-'만 붙이면 어떤 데이터든 꺼내 사용할 수 있음

예시)

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

 

자바스크립트로 사용하기

let article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

 

css에서 사용하기

article::before {
  content: attr(data-parent);
}

선택자로도 사용할 수 있음

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

 

타입스크립트 적용

  <Button.CircleAdd
    data-tooltip-text="Hello, world!"
    onMouseEnter={onMouseEnterHandler}
  />

// MouseEvent를 import해줘야 함
import React, { useState, MouseEvent } from "react";

// 타입
interface IProps {
  onMouseEnterHandler: (event: MouseEvent<HTMLElement>) => void;
}

  const onMouseEnterHandler = (event: MouseEvent<HTMLElement>) => {
    setText(event.currentTarget.dataset.tooltipText ?? "");
  };