[ JS ] e.stopPropagation 과 e.preventDefault 차이 알고 넘어가기

 

 

e.stopPropagation()과 e.preventDefault()는 비슷하게 사용되지만, 아예 다른 이벤트이다.

e.stopPropagation()은 이벤트 핸들러가 상위 태그에서 실행되지 않도록 막는 역할을 한다. 다시말해 이벤트의 버블링을 중지하여 현재 이벤트가 상위 요소(부모)로 전파되는 것을 막는다.

e.preventDefault() 는 기본 브라우저 동작을 가진 일부 이벤트가 해당 기본 동작을 실행하지 않도록 방지한다. 보통 링크 클릭 시 페이지 이동막기, 폼 제출시 페이지 리로드 방지등의 기본 동작 제어 역할을 한다. 

 

 

 

---

 

 

 

 

e.stopPropagation()

 

이벤트 핸들러의 버블링을 방지해준다.

( 버블링 : 이벤트의 자식 컴포넌트에서 부모로 (안쪽 -> 바깥쪽) 전파되는 것. )

 

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

 

 

위와 같은 react 코드에서, `<button>` 을 하나라도 클릭하면, 버튼의 alert가 노출되고,

곧이어 바로 부모인 `<div>`의 alert도 노출되어 총 2개의 alert창이 노출된다.

 

 

 

이렇게 이벤트 전파가 발생하는 것을 막기위해서 아래의 코드로 수정하여 e.stopPropagation()을 호출하여 이벤트가 부모 컴포넌트에 닿지 못하도록 전파를 막아주면 된다. 

 

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.preventDefault()

 

이벤트의 기본 동작을 방지하는 방법으로, 브라우저 이벤트의 기본 브라우저 동작을 막는 것.

예를들어, `<form>`의 submit 이벤트는 버튼을 클릭하면 페이지 전체가 리로드 되는 것이 기본 동작이다.

 

export default function Signup() {
  return (
    <form onSubmit={() => alert('Submitting!')}>
      <input />
      <button>Send</button>
    </form>
  );
}

 

 

submit의 기본 동작으로 페이지 전체가 깜빡거리는 현상이 발생하는데, 이러한 기본 브라우저 동작을 막기위해 사용하는 것이 바로 e.preventDefault()이다.

 

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

 

이렇게 브라우저의 기본 동작을 막음으로서, submit을 하여도 페이지가 깜빡거리는 현상이 사라진다.

 

 

 

 

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

https://react.dev/learn/responding-to-events#event-propagation

https://ko.react.dev/learn/responding-to-events#can-event-handlers-have-side-effects

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

https://developer.mozilla.org/ko/docs/Web/API/Event/stopImmediatePropagation