react에서는 이벤트 버블링을 root에서 관리해서 결국 root로 모든 버블링이 전달되는 것으로 알고있다.

이것의 장점은 이벤트를 한곳에서만 관리하기 때문에 유지보수등이 용이하다

즉 이벤트 버블링 최적화가 이미 구현되어있다.

글의 내용은 이벤트 버블링의 원리나 작동원리는 아니고 간단한 활용 방식에 관해서이다.

인프런에서 강의를 보는데

div > button 으로 아래 많은 버튼을 관리하는 상위 div에서 이벤트 버블링을 활용해

효과적으로 관리하는 방식을 제시했다.

div 에 onClickEvent를 부착해서 버튼의 content 내용을 props로 전달받은

onClick 함수에 전달하는 방식

const onClick = (e) => {
  const eventTarget = e.target as HTMLButtonElement;  // 이벤트가 발생한 요소를 HTMLButtonElement로 타입 캐스팅
  const tag = eventTarget.textContent;               // 이벤트가 발생한 요소의 텍스트 내용을 가져옴
  onTagClick(tag);                                   // 텍스트 내용을 인자로 하여 onTagClick 함수 호출
}

<div onClick={onClick}>
  <button>Tag 1</button>
  <button>Tag 2</button>
  <button>Tag 3</button>
</div>
function onTagClick(tag) {
  console.log(`Clicked on tag: ${tag}`);
}