[React] 이벤트 전파

이벤트 전파

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <button onClick={() => alert('Playing!')}>
        Play Movie
      </button>
      <button onClick={() => alert('Uploading!')}>
        Upload Image
      </button>
    </div>
  );
}

위 코드에서 버튼을 클릭하면 해당 버튼 이벤트 핸들러의 함수가 먼저 실행되고 이후 div 태그의 이벤트 핸들러 함수가 실행된다.

하지만 버튼이 아닌 툴바만을 클릭하면 div의 이벤트 핸들러 함수만 실행된다.

 

이벤트 전파를 방지하는 방법

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

e.stopPropagation()를 통해 해결할 수 있다.

 

 

https://ko.react.dev/learn/responding-to-events

이벤트에 응답하기 – React