[TIL] 22.05.29 프리온보딩 Day 19 - HTML dataset 이용하기(+react)

오늘 수업 내용 정리

• 글자색은 기본 검정색으로 하지 말자. 촌스럽다.
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
• https://color.adobe.com/

 

HTML 데이터세트(dataset) 사용하기 (+React)

데이터세트는 HTML 표준에 정의된 기능이다.

DOM 요소에 값을 저장하고 JS 코드로 값을 읽어들일 수 있다.

 

html 태그 내에 `data-속성-이름`을 추가하면 된다. 만약 `data-user-name`이라는 데이터세트를 추가했다고 했을 때, js에서 읽어들일 때 `data-`는 제거되고, userName과 같이 카멜케이스로 변경하여 읽는다.

각 태그마다 1개의 데이터셋 속성을 정의할 수 있다.

예시

한 개의 state를 변경하기 위해 여러 개의 이벤트 처리 메서드를 정의해야 할 때.

import { useState } from 'react';

const 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>selected is <strong>{selectedName}</strong></p>
    </>
  );
}

export default Dataset;