데이터의 속성과 dataset

노드를 웹 서버로 사용하는 경우, 클라이언트(프런트엔드)와 빈번하게 데이터를 주고받게 됩니다.

HTML5에도 HTML과 관련돤 데이터를 저장하는 공식적인 방법이 있습니다. 바로 데이터 속성(data attribute)입니다.

<ul>
  <li data-id="1" data-user-job="programmer">Chae</li>
  <li data-id="2" data-user-job="designer">Sally</li>
  <li data-id="3" data-user-job="programmer">Zzang</li>
  <li data-id="4" data-user-job="ceo">Kim</li>
</ul>
<script>
  console.log(document.querySelector("li").dataset);
  //   { id: '1', userJob: 'programmer'}
</script>

 

위와 같이 HTML 태그의 속성으로 data-로 시작하는 것들을 넣습니다. 이들이 데이터 속성입니다.

화면에 나타나지는 않지만 웹 애플리케이션 구동에 필요한 데이터들입니다. 나중애 이 데이터들은 사용해 서버에 요청을 보내게 됩니다.

데이터의 속성의 장점은 자바스크립트로 쉽게 접근할 수 있다는 점입니다. 단, 데이터 속성 이름이 조금씩 변형되었습니다. 앞의 data- 접두어는 사라지고, - 뒤에 위치한 글자는 대문자가 됩니다. data-id는 id, data-user-job은 userJob이 되는 것입니다.

반대로 dataset 에 데이터를 넣어도 HTML 태그에 반영됩니다. dataset.monthSalary = 10000; 을 넣으면 data-month-salary="10000"이라는 속성이 생깁니다.