HTML 요소에 사용자 정의 속성 넣기 (feat. data 속성)

지금까지 id 나 classname 뒤에 _1, _2 식으로 원하는 글짜를 추가한뒤에,

다시 event listener 에서 파싱하는 귀찮은 작업을 했었는데,

사용자 정의 속성을 정의할수있다는것을 알았다.

data-속성명 으로 html 태그안에 아래와 같이 넣어준다.

<div data-my-name='lee'>
            
</div>

이때 중요한것은 속성명은 절대 camelCase  가 아닌 kebab-case 로 작성되어야한다.

html 은 kebab-case 를 기본으로 사용하며, 만약 camelCase 를 사용하는 경우 react 에서는 에러가 난다.

속성명이 길다면 - 를 사이에 껴넣어서 표현해야한다.

이렇게 속성을 저장하였다면, 반대로 event listener 로 가져오는 방법도 알아야한다.

const data = e.target.dataset

dataset 이라는 속성으로 가져올수있다. (dataSet 이 아니라, 그냥 dataset 임!)

이를 출력해보면...재미이있는 현상이 발생한다.

{ veryVeryLongName: "lee"}

그렇다. JS 로 넘어올때는 data-very-very-long-name 이 veryVeryLongName 즉,

camelCase 로 변환되어 넘어오게된다.

결과적으로 아래와 같이 값을 받아올수있다.

const value = e.target.dataset.veryVeryLongName

data 의 속성의 값은 무조건 string 이기때문에,

내가 의도한값이 index 같은 숫자였다면, 추후 JS 에서 parseInt 같은 함수를 통해 number 로 직접 변환해야한다.

따라서 결국 우리는 아래와 같이 사용할것이다.

const str = e.target.dataset.index
const num = parseInt(str)