[HTML] 데이터 속성 사용하기 ( data-set, data-* )

 

데이터 속성 ( data-set, data-* )

데이터 속성은 DOM 요소에 데이터를 저장할 수 있고,

해당 데이터를 event.target.dataset.정의한이름 으로 해당 값에 접근하여 값을 다룰 수 있다.

사용 방법은 DOM 요소에 속성으로 data-원하는이름 을 작성하면 된다.

<span

id={item.id}

data-content={item.content}

role="presentation"

onClick={handleModifyComment}

style={{ cursor: 'pointer' }}

>

수정

</span>

주의할점

data- 뒤에 불가능

대문자 영어

data- 뒤에 가능

소문자 영어, 하이픈( - ), 언더스코어( _ ), 피어리드( . ), 콜론( ; )

예전에 배웠을 당시에 따로 정리는 하지 않았는데 프로젝트를 진행하면서 아주 유용하게 사용해서 정리를 했다.