html data-*

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-*

data-* - HTML: Hypertext Markup Language | MDN

 

 

하나씩 뜯어보자!

1. container.dataset.maxRating 이게 뭐야? maxRating 속성은 어디서 왔어?
   • 이건 HTML의 data-* 속성과 관련이 있음! HTML 태그에는 우리가 직접 필요한 데이터를 저장하기 위해 data- 로 시작하는 속성을 마음대로 추가할 수 있음. 예를 들면 data-user-id="123", data-product-name="커피" 처럼 말이야.
   • 우리 코드 index.html 파일을 보면 <div class="star-rating" data-max-rating="5"> 이렇게 data-max-rating이라는 속성이 있었지? 이게 바로 그거임!
   • 자바스크립트에서는 element.dataset이라는 특별한 속성을 통해 이런 data-* 속성 값들에 접근할 수 있음.
   • 중요한 규칙: HTML에서 속성 이름이 하이픈(-)으로 연결된 케밥 케이스(data-max-rating)이면, 자바스크립트의 dataset에서는 하이픈이 없어지고 뒤따르는 문자가 대문자로 바뀌는 카멜 케이스(maxRating)로 접근해야 함!
     • data-max-rating -> dataset.maxRating
     • data-user-id -> dataset.userId
     • data-product-name -> dataset.productName
   • 따라서 container.dataset.maxRating은 container 요소(예: <div class="star-rating" data-max-rating="5">)의 data-max-rating 속성 값, 즉 문자열 "5" (또는 "3")를 가리키는 거임. 자바스크립트에 원래 maxRating이라는 속성이 있는 게 아니라, HTML의 data-max-rating 속성을 dataset을 통해 접근하는 방식인 거임!