[React] 이벤트 처리하기_2

 
Event Propagation in React

리액트의 이벤트는 DOM을 타고 전파되는 특성이 있다.

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>
  );
}

위와 같이 button 태그를 감싼 div 태그에 이벤트가 부착되어 있을 때 button 태그를 클릭할 경우 div 태그의 이벤트도 같이 실행된다. 이를 이벤트 전파 또는 이벤트 버블링이라 한다. (onScroll 이벤트는 해당 태그에서만 실행된다. 이를 제외한 모든 이벤트는 전파된다.)
 
이벤트 전파를 막기 위해서는 이벤트 전파가 일어나지 않아야 하는 위치에 stopPropagation() 메서드를 사용하면 된다.

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

function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
    //✅stopPropagation 메서드를 적용한 컴포넌트로 버튼 태그를 재구성
      <Button onClick={() => alert('Playing!')}> 
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );

 
 
preventDefault()와 혼동하여 사용할 수도 있는데, preventDefault는 이벤트 자체의 고유 동작을 중지시키고, stopPropagation은 상하위 엘리먼트들로부터 전파되는 이벤트를 중지시키는 기능을 한다.