HTML data-* 태그

data 태그는 HTML에서 지원하는 태그를 커스터마이징 할 수 있는 태그이다.
복잡한 화면을 구성할 때 간혹 class, id, name 만으로 충분하지 않는 경우가 있다.
혹은 어떤 라이브러리를 사용했을 때 class 혹은 id 가 고정값으로 지정되어, 원하는 값을 서버와 통신할 수 없는 경우가 있는데, 이럴 때 사용하면 매우 유용하다.

사용법

<input type=text name="name" class=~~ id=~~ data-name="name" 
<input type=text name="phone" class=~~ id=~~ data-index="member.name"
<input type=text name="email" class=~~ id=~~ data-color="clothes.color"

위의 코드는 기본적인 input 태그인데, class 와 id 가 각각 적절히 지정되었다고 가정하였다.
data- 뒤에 원하는 명칭을 넣으면 자바스크립트나 CSS 에서 해당 태그로 제어하는 것이 가능하다.

CSS에서

div[data-name="email"] {
    //code
}

JS에서

let test = document.querySelector('div[data-name="test"]');```

실제로 data 태그 유용하게 사용했던 경험이 한 번 있었다.
monthpicker, datepicker 라이브러리를 사용했을 때 발생했었던 이슈였다.
간단하게 이슈가 발생하는 재현 과정을 설명하자면,

1. 화면에 div 태그로 영역을 만든 후 그 안에 table 을 만든다.

2. table 을 잘 구성하여, 다수의 input 태그를 정의한다.

3. input 태그의 몇 몇 요소는 날짜를 입력하는 항목이다.

4. 해당 table 전체를 clone(jQuery) 하여 새로운 페이지를 만든다.

5. 새로운 페이지가 생성되면 기존의 영역은 1페이지, 새로 생성된 페이지는 2페이지가 된다.

6. 이렇게 1-50 페이지까지 동적으로 생성, 삭제, 열람이 가능하다.

7. 이렇게 동적으로 영역을 생성할 때 기존의 날짜 항목에 값이 입력되어있다면 (1페이지의 날짜 항목에 날짜 값이 있다면) 2페이지의 날짜 항목에도 같은 값이 들어가 있다.

8. 수동으로 2페이지의 날짜 값을 바꿔도, 서버로 보낼 때는 모든 페이지의 날짜 항목이 같은 값으로 전송된다.

이 문제의 원인은, datepicker 나 monthpicker 를 이용하여 날짜 값을 선택할 때, 해당 라이브러리는 독자적인 id 값을 생성하여 해당 항목에 부여하게 되는데, 이 아이디가 참조하고 있는 라이브러리의 날짜 값이 바뀌지 않았던 것이다.
이 이슈는 나중에 시간이 있을 때 재현과 해결하는 과정을 포스팅하도록 하겠다.


어쨌든 이 이슈를 해결하기 위해서 JS로 id 값을 제어할 수 없었기 때문에, data- 태그를 커스터마이징하여 해결할 수 있었다.