preventDefault()와 stopPropagation()의 차이

기본적인 이벤트를 방지할 때 e.preventDefault()를 많이 사용했었는데 프로젝트에서 e.stopPropagation()가 사용되고 있어서 두 개의 차이를 알아보기로 했다

차이를 알아보기에 앞서 먼저 두 메서드가 어떤 역할을 하는지부터 간단히 알아봤다

1. e.preventDefault()

a tag를 누르게 되면 href를 통해 이동을 하거나 새로고침이 발생하게 된다
이러한 기본동작을 실행하지 않도록 막아주는 역할을 하는 메서드다

import React, { FC, useCallback, MouseEvent } from 'react';

const App: FC = (): JSX.Element => {
  const onLikeClick = useCallback((e: MouseEvent<HTMLDivElement>): void => {
  	e.preventDefault();
     	alert("사이트로 이동하지 않습니다.");
  }, []);
  
   return (
      <a
        href="http://www.naver.com"
        target="_blank"
        rel="noopener noreferrer"
      >
       <div>글 제목: 자바스크립트</div>
     	
       <div onClick={onLikeClick}>🔥</div>
     </a>
   );
};

export default App;

위 코드에서 🔥를 누르게되면 네이버에 접속하지 않고 알림이 발생하게 된다
이는 preventDefault()로 a tag의 기본동작을 막았기 때문이다

이외에도 submit등을 할 때 페이지가 새로고침되는 현상을 막을 수 있다

⚠ 이벤트 흐름의 어떤 단계에서든 preventDefault()를 호출하면 이벤트를 취소하기 때문에 기본동작을 막고싶다면 꼭 첫줄에 넣어야하며,
취소 불가능한 이벤트가 있기 때문에 cancelable을 통해 확인해보는 것도 좋을 것 같다

2. e.stopPropagation()

부모 엘리먼트에게 이벤트 전달을 막아주는 역할을 하는 메서드다

import React, { FC, useCallback, MouseEvent } from 'react';

const App: FC = (): JSX.Element => {
  const onChildClick = useCallback((e: MouseEvent<HTMLButtonElement>): void => {
    e.stopPropagation();
    alert("자식에서만 실행됩니다.");
  }, []);
  
  return (
    <div onClick={() => alert("부모에서 실행되었습니다")}>

      <button onClick={onChildClick}>🔥</button>

    </div>
  );
};

export default App;

위 코드에서 🔥를 클릭하면 다음과 같은 알림이 발생한다

자식에서만 실행됩니다.

이는 stopPropagation()이 이벤트의 흐름을 차단했기 때문이다

이벤트는 내부에서 밖으로 점점 전파된다
이러한 전파를 버블링이라고 한다

3. TL; DR

preventDefault()는 브라우저 고유의 행동을 막아주는 함수라면,
stopPropagation()은 부모 엘리멘트에게 이벤트가 전달되는 것을 막아주는 함수다

*References

• MDN : Event.stopPropagation()
• MDN : Event.preventDefault()
• [JS] e.preventDefault()와 e.stopPropagation()의 차이점