[HTML , JS] data- 속성을 이용해 (기본 event로) 처리하기

HTML의 태그에는 data- 라는 속성이 존재한다. 이는 미리 선언해두면 함수의 기본 event 인자에서 뽑아 쓸 수 있는데 데이터를 선별할 때 사용할 수가 있다. 먼저 속성의 선언을 살펴보자

<tag data-key="helloWorld" /> // data- 이후에 key는 임의로 정한것

이렇게 선언해두면 JS에서 함수의 기본 event로 불러올 수 있다.

event.target.dataset 안에 들어있고 (임의의 이름)으로 data 속성의 값을 가지고 올 수 있다.

​

다음은 배열에서 선별을 위한 함수이다.

function onButtonClick(event, items) {
	const dataset = event.target.dataset;
	const key = dataset.key;
	const value = dataset.value;

	if (key == null || value == null) {
		return;
	}

	const select = items.filter((item) => item[key] === value); // select에 선별된 것만 배열로 들어간다.
}

기본 event로 data-key로 사용할 값과 value로 사용할 값을 가지고 왔다.

items 인자는 배열로 배열의 아이템들 안에는 각각 key:"??"와 value:"!!"들이 들어있다. filter를 이용해 ??와 내가 원하는 value를 비교해 선별해 새로운 배열을 만들 수 있다.