react 잘못된 onClick, data-set

나는 항상 list에서 뽑을 때 tag에 data-set 을 사용해서 onClick할 때 e.target.dataset.set을 사용하여 해당 리스트에 맞는 id 를 가져와서 작업을 했다.

하지만 이는 실제 DOM을 건드리는 일이라고 해서 성능에 살짝 안좋다고 한다.

그래서 어떻게 할 까 고민을 하였는데 한가지 방법이 떠올랐다.

const clickItem = (item) => {
	console.log(item);
};
return (
 <>
{[1,2,3].map((item) => {
	return <div onClick={() => clickItem(item)}>{item}</div>
})}
</>
)

이런식으로 하면 dataset을 사용하지 않고 클릭을 하면 해당 list에서 item 만을 사용할 수 있다.

이걸 응용하면

const clickItem = (item,name) => {
  if (name === 'item1') {
	console.log(item);
  }
};
return (
 <>
{[1,2,3].map((item) => {
	return <div onClick={() => clickItem(item,'item1')}>{item}</div>
})}
{[1,2,3].map((item) => {
	return <div onClick={() => clickItem(item,'item2')}>{item}</div>
})}
</>
)

이렇게 할 수도 있다.