stopPropagation을 이용한 이벤트 전파 제거

위 스크린샷의 녹색 부분이 inner 영역이고 회색 부분이 out 영역이며, 각 영역을 클릭했을 때, console.log('영역click!') 이라고 출력되기 만들었다.

const outClick = () => {
  console.log("outClick!");
};

const innerClick = () => {
  console.log("innerClick!");
};

return (
  <div
    style={{ width: "100vw", height: "100vh", background: "#e0e0e0" }}
    onClick={outClick}
  >
    <div
      style={{ width: "50%", height: "50%", background: "green" }}
      onClick={innerClick}
    ></div>
  </div>
);

코드는 위와 같이 작성하였다. 바깥 부분의을 클릭하면 outClick 함수가 실행되고, 내부를 클릭하면 innerClick 함수가 실행된다. 여기서 문제점은 안쪽의 녹색 영역을 클릭했을 때 innerClick 함수와 outClick 함수가 동시에 실행된다는 점이다.

이 문제를 해결하기 위해서는 아래와 같이 innerClick 함수를 수정하면 된다.

const innerClick = (e: any) => {
  e.stopPropagation();
  console.log('innerClick!');
};

e.stopPropagation() 함수를 사용하면 현재 이후의 이벤트 전파를 막을 수 있다.

녹색 영역을 클릭했을 때 정상적으로 innerClick 만 출력된 모습이다.