0Pricing
HTML Academy · 강의

JavaScript에서 dataset으로 data-*에 접근하기

dataset API로 사용자 지정 데이터 속성 읽고 쓰기

JavaScript에서 dataset으로 data-*에 접근하기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

dataset API란 무엇인가요

모든 HTML 요소는 data-* 속성을 dataset 프로퍼티로 제공합니다. 이 프로퍼티는 getAttribute()를 호출하지 않아도 속성 이름을 값에 매핑하는 DOMStringMap입니다.

속성에서 프로퍼티로의 매핑

data-user-id는 el.dataset.userId가 됩니다. 속성 이름의 하이픈은 dataset 프로퍼티에서 camelCase로 변환됩니다. data-item-count에는 el.dataset.itemCount로 접근합니다.

값 읽기

데이터 속성 읽기: const id = el.dataset.userId. 모든 dataset 값은 문자열이므로 필요에 따라 Number() 또는 parseInt()로 숫자 값을 변환하세요. 정의되지 않은 속성은 null이 아니라 undefined를 반환합니다.

const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);

값 쓰기

dataset을 통해 데이터 속성을 설정하세요: el.dataset.state = "active". 그러면 data-state HTML 속성이 생성되거나 업데이트됩니다. 속성 변경 사항은 DOM에 즉시 반영되며 MutationObserver로 관찰할 수 있습니다.

값 삭제

데이터 속성 삭제: delete el.dataset.userId. 해당하는 data-user-id 속성이 요소에서 제거됩니다. 명시적으로 제거하려면 el.removeAttribute("data-user-id")를 사용할 수도 있습니다.

dataset 순회

dataset은 DOMStringMap이므로 for...in 반복문으로 순회하거나 Object.entries로 전개할 수 있습니다: Object.entries(el.dataset).forEach(([key, value]) => { ... }). 이 방법은 요소의 모든 데이터 속성을 일괄적으로 읽을 때 유용합니다.

구성 요소 상태에 dataset 사용

숨겨진 입력이나 JavaScript 변수 대신 데이터 속성에 가벼운 구성 요소 상태를 저장하세요. 탭 구성 요소는 컨테이너의 data-active-tab에 active 탭의 인덱스를 저장하므로 공유 변수 없이도 모든 스크립트에서 읽을 수 있습니다.

dataset을 사용한 이벤트 위임

항목 목록에서는 컨테이너에 클릭 리스너 하나만 연결하세요. 클릭이 발생하면 클릭된 대상의 dataset을 읽습니다: e.target.closest("[data-id]").dataset.id. 항목마다 따로 연결하는 비용 없이 리스너 하나로 모든 항목을 처리할 수 있습니다.

dataset과 사용자 지정 프로퍼티 비교

HTML에서 읽어야 하는 데이터(서버에서 렌더링된 메타데이터, CSS 선택자에서 접근할 데이터)에는 dataset을 사용하세요. HTML에 표시할 필요가 없는 일시적인 실행 중 상태에는 JavaScript 변수를 사용하세요. 두 방식을 섞으면 불필요한 복잡성이 더해집니다.

형 변환 주의

dataset은 항상 문자열을 반환합니다. el.dataset.active === true는 항상 거짓입니다. el.dataset.active === "true"와 비교하거나 다음과 같이 변환하세요: el.dataset.active === "true". dataset에 저장된 불리언 상태는 문자열 비교가 필요합니다.

dataset과 getAttribute 비교

두 방법 모두 데이터 속성을 읽습니다. dataset은 camelCase로 접근할 수 있어 더 편리하고, getAttribute는 "data-" 접두사를 포함한 전체 속성 이름이 필요합니다. 최신 코드에서는 dataset을 우선 사용하고, 데이터 속성과 함께 데이터가 아닌 속성도 순회할 때는 getAttribute를 사용하세요.

이해도 확인

data-user-id HTML 속성은 JavaScript dataset 객체에서 어떻게 나타나나요?

요약

dataset API는 data-* 속성을 camelCase JavaScript 프로퍼티에 매핑하여 쉽게 읽고, 쓰고, 삭제할 수 있게 합니다. 이를 통해 숨겨진 입력이나 전역 변수 없이 구성 요소 상태 저장, 이벤트 위임 패턴, 서버에서 클라이언트로의 데이터 전달을 구현할 수 있습니다.

자주 묻는 질문

“JavaScript에서 dataset으로 data-*에 접근하기” 강의는 무료인가요?

네 — “JavaScript에서 dataset으로 data-*에 접근하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“JavaScript에서 dataset으로 data-*에 접근하기”에서 뭘 배우나요?

dataset API로 사용자 지정 데이터 속성 읽고 쓰기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“JavaScript에서 dataset으로 data-*에 접근하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. data-* 문법 및 이름 지정 규칙
  2. JavaScript에서 dataset으로 data-*에 접근하기
  3. CSS 속성 선택자로 data-* 사용하기
  4. 실전 패턴 툴팁 및 상태 추적
← HTML Academy(으)로 돌아가기