[JS] e.preventDefault()와 e.stopPropagation()의 차이점

안녕하세요. 오늘은 e.preventDefault()와 e.stopPropagation() 함수 두개의 차이점에 대해서 알아보겠습니다. 이 두개의 이벤트 함수들은 주로 자바스크립트나 타입스크립트를 이용하여 웹을 프로그래밍 할 때 많이 쓰이는 함수들이며, 앞에 붙은 e.은 이벤트 객체를 의미합니다.

두 함수를 사용하는 간단한 예시 코드들을 통해서 알아봅시다!

1. e.preventDefault() 📗

e.preventDefault()를 사용해야 하는 대표적인 상황들을 얘기 하면서 알아보겠습니다.

html 웹 브라우저의 기본적인 동작들은 다양하게 있습니다. 첫번째로 a 태그에서 href 속성을 이용한 사이트 이동이 있습니다. 만약 아래 코드와 같이 설계되어 있다고 가정해봅시다.

import React, { FC } from 'react';

const App: FC = (): JSX.Element => {
   return (
       <a
        href="http://www.naver.com"
        target="_blank"
        rel="noopener noreferrer"
       >
       <div>글 제목: 자바스크립트</div>
     	
       <div>좋아요 개수: 10</div>
     </a>
   );
};

export default App;

a 태그가 다음의 내용들을 감싸고 있는 상태에서 만약 좋아요 개수 라는 글자를 눌렀을 때만 href 속성에 있는 주소로 가는 이벤트를 막아주고 싶을때는 어떻게 적으면 될까요?

정답은 간단합니다. 좋아요 개수라는 글자를 눌렀을 때만 onClick 속성에다가 이벤트 객체를 이용하여 preventDefault() 처리를 해준다면 좋아요 개수라는 글자를 눌렀을 때는 a태그에 등록된 주소로 이동하지 않게 됩니다. 이 처럼 preventDefault()는 브라우저 고유의 동작을 중단시켜주는 역할을 합니다.

또 다른 대표적인 예로는 onSubmit을 했을때, 페이지가 리프레쉬 되는 고유의 브라우저 동작을 preventDefault()로 막아줄 수 있습니다.

정답은 아래의 코드와 같습니다.

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}>좋아요 개수: 10</div>
       {/* "좋아요 개수" 글씨를 클릭할때는 사이트로 이동하지 않게됨. */}
     </a>
   );
};

export default App;

2. e.stopPropagation() 📘

e.stopPropagation() 함수를 사용하는 상황을 아래의 코드를 이용하여 활용 해보겠습니다.

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

const App: FC = (): JSX.Element => {
  return (
    <div onClick={() => alert("부모에서 실행되었습니다")}>

      <button onClick={() => alert("자식에서 실행되었습니다")}>클릭!!</button>

    </div>
  );
};

export default App;

해당 코드를 실행하였을때, 클릭!! 이라는 버튼을 누르게 된다면 결과는 다음과 같습니다.

실행 결과
자식에서 실행되었습니다
부모에서 실행되었습니다

그런데 만약, 클릭!! 버튼을 눌렀을 때, 부모 클릭 이벤트 부모에서 실행되었습니다 라는 alert를 띄우지 않고, 오직 자식에서 실행되었습니다 라는 alert만 띄우고 싶을때에는 어떻게 해야할까요?

이처럼 부모 엘리먼트에게 이벤트 전달을 중단해야 할 때 쓰이는 함수가 바로 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;

실행 결과
자식에서만 실행됩니다.

3. 간단 정리 📃

preventDefault()는 브라우저 고유의 행동을 막아주는 함수라면, stopPropagation()은 부모 엘리먼트로의 이벤트 전달을 막아주는 함수라고 이해하시면 될 것 같습니다.

이상으로 글을 마치겠습니다! 글 읽어주셔서 감사합니다. 🙂