HTML - 데이터 속성과 dataset

서버에서 보낸 값을 자바스크립트 변수로 저장해도 되지만, HTML5에도 HTML과 관련된 데이터를 저장하는 공식적인 방법인 데이터 속성(data attribute)이 있다.

HTML 요소에 data-로 시작하는 속성값을 추가하면 된다. 나중에 이 데이터들을 사용해 서버에 요청을 보내게 된다.

<ul>
  <li data-id="1" data-user-name="youjin">mango</li>
  <li data-id="2" data-user-name="minsu">melon</li>
  <li data-id="3" data-user-name="nittre">apple</li>
</ul>

또한 자바스크립트로 데이터 속성에 쉽게 접근할 수 있다.

console.log(document.querySelector("li").dataset);
//{ id: '1', 'userName': 'youjin'}