React에서 이벤트 버블링 문제 해결기

문제 발생 원인

저는 프로젝트에서 Slider 컴포넌트 내부에 각각의 슬라이드가 Link를 통해 상세 페이지로 연결되는 구조를 만들었습니다. 슬라이드 안에는 ActionBar 컴포넌트가 포함되어 있고, 이 ActionBar에는 두 개의 버튼이 있었습니다. 그러나 이 버튼을 클릭할 때마다 상위 Link 요소로 이벤트가 전파되어 상세 페이지로 이동하는 문제가 발생했습니다. 이 문제는 이벤트 버블링으로 인해 발생하는 것이었습니다.

before1.mp4

해결 과정

ActionBar 자체에서 이벤트 버블링 중지 시도

처음에는 ActionBar 자체에서 이벤트 버블링을 막아보려고 했습니다. 이를 위해 ActionBar의 상위 div에 onClick 핸들러를 추가하고, 여기서 e.stopPropagation()을 호출했습니다.

const ActionBar: React.FC = () => {
  const handleActionBar = (e: React.MouseEvent<HTMLDivElement>) => {
    e.stopPropagation(); // 이벤트 버블링 방지
  };

  return (
    <div className={styles.container} onClick={handleActionBar}>
      <InfoIconButton />
      <MoreOptionsIconButton />
    </div>
  );
};

이렇게 하여 이벤트 전파를 막으려고 했지만, 버튼을 클릭하면 여전히 상위 Link로 이벤트가 전파되어 상세 페이지로 이동하는 현상이 발생했습니다.

각 버튼에서 이벤트 버블링 중지 시도

다음으로는 ActionBar 자체가 아니라, ActionBar 내부의 각 버튼에서 이벤트 전파를 막아보기로 했습니다. 각 버튼의 onClick 핸들러에서 e.stopPropagation()을 호출하여 이벤트 전파를 중지했습니다.