버튼의 id를 구별하려고 원래는 매개변수로 구분하여 익명함수를 썼으나 익명함수를 쓰는 부분은 지양하라는 얘기에 써보게 된 부분이 이 getAttribute와 data-set이 있다. 요 2개를 살펴보려고 한다.

getAttribute

• 선택한 요소의 특정한 속성의 값을 가져올 수 있다.
• data-id 말고도 className이나 id 등 원하는 속성을 가져올 수 있다.
• 속성을 변경하고 싶은 경우에는 setAttribute(속성명, 값) 으로 변경가능하다.

const onModalOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    const modalName = e.currentTarget.getAttribute('data-id');

    if (modalName === 'voucher') {
      setVoucherHistoryModalOpen(true);
    }
  };

<button data-id="voucher" onClick={onModalOpen} type="button">
   Voucher’s History
</button>

data-set

• HTML 태그안에 데이터 속성(data-)을 둔 데이터만 js와 css에 사용할 수 있다.
• HTML5에서 처음 생긴 속성이다.
• 문자, 숫자, 대시(-), 점(.), 콜론(:), 언더스코어(_)는 사용가능하나 알파벳 대문자는 사용 불가

const onModalOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    const modalName = e.currentTarget.dataset.id;

    if (modalName === 'voucher') {
      setVoucherHistoryModalOpen(true);
    }
  };

<button data-id="voucher" onClick={onModalOpen} type="button">
   Voucher’s History
</button>

차이

둘의 차이가 궁금해서 찾아본 stackoverflow에서는

• getAttribute는 한 줄, 한 줄 디버거 할 때는 괜찮으나 한 번에 쭉 돌릴 경우 제대로 돌아가지 않는다.
• dataset 에서는 한 줄씩 디버거하나 한 번에 하나 둘 다 잘 돌아간다.