참고 :
MDN 데이터 세트(dataset)
책 : 실전 리액트 프로그래밍/이재승 저

데이터세트(dataset)

• 데이터 세트는 HTML 표준에 정의된 기능
• DOM요소에 값을 저장, JS 코드로 값을 읽어들일 수 있음
• html 사용법 : data-를 시작으로 data-이름을-지정하면-된다와 같이 tag element에 속성으로 사용 : <p data-user-name>{state.userName}</p>
• js 사용법 : data-user-name 데이터 세트를 읽어들인다면, data-는 제거되며, userName과 같이 카멜케이스로 변경하여 읽는다.

data- 뒤에 가능 : 소문자 영문, 점(.), 하이픈(-), 로우데시(_), 콜론(:)
data- 뒤에 사용 불가능 : 대문자 영문
html에서 data-abc-def 라는 이름의 속성은 JS에서 abcDef key에 응답

사용 예

• 1개의 state를 변경하기 위해 여러개의 이벤트 처리 메서드를 정의해야 할 때(비효율적으로 이벤트 처리 메서드가 증가)

import React, { useState } from 'react';

function Dataset() {
  const [selectedName, setSelectedName] = useState('none');
  const onClick = (e) => {
    const name = e.target.dataset.name;
    setSelectedName(name);
  };
  return (
    <>
      <button onClick={onClick} data-name='Hwang'>Hwang</button>
      <button onClick={onClick} data-name='Kim'>Kim</button>
      <button onClick={onClick} data-name='Jo'>Jo</button>
      <button onClick={onClick} data-name='Sim'>Sim</button>
      <button onClick={onClick} data-name='Lee'>Lee</button>
      <button onClick={onClick} data-name='Jang'>Jang</button>
	//... 더많은 버튼이 있을 수도..
      <p>selecteName is <strong>{selectedName}</strong></p>
    </>
  );
}

export default Dataset;

e.target.innerText을 통해 버튼요소의 내부요소를 읽을 수도 있겠지만,
만약 값이 변경될 데이터가 다르다면 데이터세트방식이 유용해진다.