e.preventDefault()와 e.stopPropagation()의 차이 !

글을 쓰는이유

리액트로 어플리케이션 개발을 위한 강의를 듣는 도중에 e.preventDefault()와 e.stopPropagation()를 사용하는 것을 보고 이 함수들은 정확히 어떨때 사용하는지 의문이 들어 글을 작성하게 되었다.

1. e.preventdefault()

import React from 'react';
import { Link } from 'react-router-dom';

const App = {
   return (
       <Link
		to='board/{boardnumber}'
       >
       <div>글 제목: 테스트</div>
     	
       <div>댓글수:5</div>
     </Link>
   );
};

링크 태그를 클릭해도 해당 url로 가지 않게 하기 위해서는 어떻게 해야 될까?

위 코드에서 링크태그를 클릭 했을 때 to에 있는 url로 가지 않게 하기 위해서는 onclick함수를 추가하고 해당 onclick 함수에 e.preventdefault를 한다면 웹에 동작이 중단되면서 가지 않게 된다.

e.preventdefault 함수는 브라우저의 동작을 중단시키는 역할을 하며 때로는 submit이 동작했을때 페이지를 새로고침 안시키기 위해서 e.preventdefault 함수를 사용한다.

2.e.stopPropagation()

import React from 'react';

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

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

    </div>
  );
};

export default App;

위 코드에서 부모태그를 클릭했을 때와 자식 태그를 클릭했을 때를 구분하기 위해서는 e.stopPropagation() 함수를 사용해야한다.

웹은 기본적으로 부모 안에 자식이 있게 된다면 자식 안에 있는 태그에 이벤트를 발생시켰을 때 부모 태그에 있는 이벤트 또한 같이 발생하게 된다. 이러한 현상을 방지 하기 위해서는 자식태그의 이벤트에 e.stopPropagation()을 선언해줘야 된다.

아래 코드와 같이 작성하면 된다.

import React from 'react';

function Sunclick = (e) =>  {
e.stopPropagation()
alert("자식에서 클릭되었습니다.");
}

const App = (e) =>  {
  return (
    <div onClick={() => alert("부모에서 클릭.")}>

      <button onClick={Sunclick}>자식 클릭</button>

    </div>
  );
};

export default App;

요약 정리

preventDefault()는 브라우저 이벤트를 막아주는 함수라면, stopPropagation()은자식에서 부모로 엘리먼트로의 이벤트 전달을 막아주는 함수라고 생각이 된다 !!