참고 :
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
을 통해 버튼요소의 내부요소를 읽을 수도 있겠지만,
만약 값이 변경될 데이터가 다르다면 데이터세트방식이 유용해진다.