data-* attribute란 무엇이며 어떻게 읽나요?

Question

Accepted Answer

**`data-*` attribute**는 어떤 HTML element에든 커스텀하고 사적인 데이터를 저장하게 해줍니다. 비표준 attribute나 class를 남용하지 않고, JavaScript가 읽을 수 있는 메타데이터를 DOM에 붙이는 표준 방식입니다. ```html ``` ## `dataset`을 통해 JavaScript에서 읽기 ```js const btn = document.querySelector("button"); btn.dataset.id; // "42" btn.dataset.userRole; // "admin" ← kebab-case가 camelCase가 된다 btn.dataset.isActive; // "true" ← 항상 문자열 // 쓰기를 하면 attribute도 갱신된다 btn.dataset.id = "99"; // DOM에서 data-id="99"로 설정한다 ``` 두 가지 핵심 규칙: `data-user-role`은 `dataset.userRole`로 접근하고(대시가 camelCase로 바뀜), **모든 값은 문자열**이므로 필요에 따라 변환해야 합니다(`Number(btn.dataset.id)`, `btn.dataset.isActive === "true"`). ## CSS에서 읽기 ```css button[data-is-active="true"] { font-weight: bold; } button::after { content: attr(data-id); } /* 값을 표시한다 */ ``` ## 흔한 패턴: 이벤트 위임 ```js list.addEventListener("click", (e) => { const id = e.target.dataset.id; // 어떤 항목이 클릭되었는지 안다 if (id) deleteItem(id); }); ``` 각 element에 id를 저장하면 부모에 리스너 하나로 모든 항목을 처리할 수 있습니다. ## 왜 중요한가 `data-*`는 (추가 API 호출 없이) 서버 데이터를 클라이언트 측 JS를 위해 DOM으로 전달하고, 이벤트 위임을 연결하며, CSS 상태를 구동하는 깔끔하고 표준을 준수하는 방법입니다. HTML을 무효로 만드는 비표준 attribute를 만들어내지 않아도 됩니다. 다만 크거나 민감한 데이터는 저장하지 마십시오. 마크업에 노출됩니다.

dataset을 통해 JavaScript에서 읽기

CSS에서 읽기

흔한 패턴: 이벤트 위임

왜 중요한가

`dataset`을 통해 JavaScript에서 읽기