Devlog/HTML & CSS

data-* 속성과 dataset 객체

myalog 2024. 3. 27. 19:32

계약직으로 잠깐 프로젝트에 참여했을 때, data-* 속성을 잘 활용하는 팀원이 있었다.

한번 들어는 봤지만, 역시 자주 사용하는 속성이 아니어서 "이거다!" 라고 스스로에게 설명을 할 수 없었다.

그래서 한번 개념을 짚고 넘어가고자 정리해보려고 한다. 🥹

html 태그에는 표준으로 정의된 속성들이 존재한다.

하지만 개발을 하다 보면 표준 속성이 아닌 개발자가 속성을 마음대로 정의해서 사용해야 할 때가 있다.

 

이를 위해 사용자 정의 속성들을 표준화하여 data-* 형식의 속성으로 정의한 것이 데이터 속성이다.

데이터 속성을 통해 전달된 정보들은 DOM의 dataset 객체 내부에 저장되어 쉽게 접근이 가능하다.

각 속성은 문자열이며, 읽거나 쓸 수 있다.

 

데이터 속성의 장점은 다양하지만 대표적으로 3가지가 있다.

  • 자바스크립트와 상호 작용을 함으로써 태그의 데이터 속성을 통해 동적인 행동을 제어할 수 있다.
  • css의 선택자로 특정 데이터 속성을 가진 엘리먼트에 접근할 수 있다.
  • html 내에서 개발자가 원하는 일반 html 요소의 속성 이외에도 추가적인 정보를 저장하고 관리할 수 있어진다.
    이러한 정보는 페이지 로딩 시점에는 필요하지 않지만, 유저와의 상호 작용에 따라 후에 필요해지는 정보이다.

하지만 기존에 존재하는 html 요소를 읽고 가져오는 것과 비교해서 상대적으로 느리므로 상황에 따라 적절히 사용해야 한다.

 

실제로 데이터 속성에 접근해보기

 

// index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="wrap"></div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

자바스크립트로 DOM 요소를 구성하기 위해 html에 id가 "wrap"인 컨테이너 하나만 만들었다.

// script.js

const onclickHandler = () => {
  if (newContent.dataset.active === "false") {
    newContent.setAttribute("data-active", "true");
    newContent.textContent = "hello world!";
  } else {
    newContent.textContent = "hello JavaScript!";
    newContent.setAttribute("data-active", "false");
  }
};

const wrap = document.querySelector("#wrap");

const newContent = document.createElement("p");
newContent.textContent = "hello world!";

const btn = document.createElement("button");
btn.textContent = "날 누르면 텍스트 색깔이 변한다냥😽";
btn.addEventListener("click", onclickHandler);

wrap.append(newContent, btn);

컨테이너 안에 p 태그와 button 을 생성하고, 랜더링이 되었을 때 처음으로 보여질(초기화 될) 문장을 삽입하여 넣었다.

dataset.active의 초기값은 따로 지정해두지 않았다.

렌더링이 되었을 때 처음 색상은 검정색이고, 버튼을 누르면서 색상이 변하는 로직으로 생각했기 때문이다.

버튼이 클릭되었을 때 데이터 속성을 동적으로 삽입하여 조건별로 스타일링과 문장이 달라질 수 있도록 하였다.

#wrap > p {
  font-size: 20px;
}
#wrap > p[data-active="false"] {
  color: blue;
}

#wrap > p[data-active="true"] {
  color: red;
}

 

🌟 Ta-da!

 

데이터 속성을 알기 전까지는 addClassList를 활용해서만 토글을 구현할 수 있을 줄 알았다.

중요한 정보를 활용하는게 아닌 단순 스타일링을 위해서는 앞으로 유용하게 사용할 수 있을 것 같다.

<Ref>

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes