Language/Javascript

[자바스크립트] stopPropagation()와 preventDefault()이란? 그리고 차이점

이벤트 처리에서 `stopPropagation`와 `preventDefault`의 차이점

웹 개발에서 DOM 이벤트를 처리할 때 자주 마주하는 두 가지 중요한 메서드가 있습니다. 바로 stopPropagation와 preventDefault입니다. 이 두 메서드는 이벤트가 발생했을 때 어떻게 처리할지를 제어하는 데 필수적인 역할을 합니다. 이번 포스팅에서는 stopPropagation와 preventDefault의 역할과 차이점을 이해하고, 언제 어떤 경우에 사용해야 하는지 살펴보겠습니다.

[자바스크립트] stopPropagation()와 preventDefault()이란? 그리고 차이점

1. `stopPropagation()` 메서드란?

stopPropagation() 메서드는 이벤트의 전파(Propagation)를 중단시킵니다. 여기서 전파란 이벤트가 발생했을 때, 그 이벤트가 DOM 트리에서 부모 요소로 이동하는 과정을 의미합니다. 기본적으로 이벤트는 버블링(Bubbling)과 캡처링(Capturing) 단계에서 전파되며, stopPropagation은 이 과정을 멈추도록 지시합니다.

이벤트 전파 방식

이벤트 전파는 크게 두 가지 방식으로 나뉩니다:

캡처링 단계(Capturing Phase): 이벤트가 최상위 부모 요소에서 시작하여 자식 요소로 전달되는 과정.
버블링 단계(Bubbling Phase): 이벤트가 자식 요소에서 시작해 부모 요소로 전파되는 과정.

기본적으로 대부분의 이벤트는 버블링 방식을 따릅니다. 예를 들어, <div> 안에 <button>이 있을 때 버튼을 클릭하면, 이 클릭 이벤트는 버튼에서 먼저 발생한 후 부모인 <div>로 전파됩니다. 이 과정에서 stopPropagation()을 호출하면, 해당 이벤트가 더 이상 부모로 전파되지 않도록 막을 수 있습니다.

document.querySelector('button').addEventListener('click', (event) => {
    event.stopPropagation(); // 이벤트 전파 중단
    console.log('Button clicked!');
});

document.querySelector('div').addEventListener('click', () => {
    console.log('Div clicked!');
});

위 코드에서 button을 클릭해도 div의 클릭 이벤트는 발생하지 않습니다. 왜냐하면 stopPropagation()이 호출되었기 때문입니다.

리액트 예시

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

React에서는 DOM 이벤트를 처리할 때도 브라우저의 기본 메서드인 stopPropagation()과 preventDefault()를 동일하게 사용할 수 있습니다. 이번에는 두 메서드를 React 환경에서 사용하는 예시를 통해 구체적으로 설명하겠습니다.

1. `stopPropagation()` 예시 (React)

stopPropagation()을 사용하여 이벤트가 부모 컴포넌트로 전파되지 않도록 하는 React 예제를 살펴보겠습니다.

import React from "react";

function App() {
  const handleDivClick = () => {
    console.log("Div clicked!");
  };

  const handleButtonClick = (event) => {
    event.stopPropagation(); // 부모로의 이벤트 전파 중단
    console.log("Button clicked!");
  };

  return (
    <div onClick={handleDivClick} style={{ padding: "20px", backgroundColor: "lightgray" }}>
      <button onClick={handleButtonClick}>Click Me</button>
    </div>
  );
}

export default App;

설명:

위 코드에서 div를 클릭하면 handleDivClick 함수가 호출되어 "Div clicked!"가 출력됩니다.
하지만 버튼을 클릭할 때 event.stopPropagation()을 호출하므로, 버튼을 클릭해도 이벤트가 부모인 div로 전파되지 않고, "Button clicked!"만 출력됩니다.

2. `preventDefault()` 예시 (React)

preventDefault()를 사용하여 기본 동작을 방지하는 예제를 React로 구현해 보겠습니다. 이 예시에서는 링크를 클릭할 때 페이지 이동을 막고 다른 동작을 처리합니다.

import React from "react";

function App() {
  const handleLinkClick = (event) => {
    event.preventDefault(); // 링크의 기본 동작(페이지 이동)을 막음
    console.log("Link click prevented, staying on the same page!");
  };

  return (
    <div>
      <a href="https://www.google.com" onClick={handleLinkClick}>
        Go to Google
      </a>
    </div>
  );
}

export default App;

설명:

기본적으로 <a> 태그를 클릭하면 해당 href 속성에 있는 URL로 이동하게 됩니다.
그러나 event.preventDefault()를 사용하면 클릭해도 페이지가 이동하지 않고, 콘솔에 "Link click prevented, staying on the same page!"라는 메시지만 출력됩니다.

2. `preventDefault()` 메서드란?

preventDefault() 메서드는 이벤트의 기본 동작을 방지합니다. 예를 들어, 링크를 클릭하면 기본적으로 해당 링크의 URL로 이동하거나, 폼을 제출하면 페이지가 리프레시됩니다. 이러한 기본 동작을 막고자 할 때 preventDefault()를 사용합니다.

document.querySelector('a').addEventListener('click', (event) => {
    event.preventDefault(); // 기본 동작 방지
    console.log('Link click prevented!');
});

위 코드에서 preventDefault()가 호출되면, 링크를 클릭하더라도 페이지가 이동하지 않고, 콘솔에 "Link click prevented!"라는 메시지만 출력됩니다.

사용 예시

폼 제출 시 페이지 리프레시를 막고, JavaScript로 데이터를 처리하고 싶을 때.
<a> 태그의 기본 링크 이동 동작을 막고, 다른 동작을 수행하고 싶을 때.
우클릭 메뉴나 드래그 동작 등의 기본 브라우저 기능을 제어할 때.

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시

때로는 특정 이벤트가 부모로 전파되는 것도 막고, 기본 동작도 방지해야 할 때가 있습니다. 이럴 때 두 메서드를 함께 사용할 수 있습니다.

import React from "react";

function App() {
  const handleDivClick = () => {
    console.log("Div clicked!");
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();  // 기본 폼 제출 방지
    event.stopPropagation(); // 부모로 이벤트 전파 중단
    console.log("Form submit prevented and event propagation stopped!");
  };

  return (
    <div onClick={handleDivClick} style={{ padding: "20px", backgroundColor: "lightgray" }}>
      <form onSubmit={handleFormSubmit}>
        <button type="submit">Submit Form</button>
      </form>
    </div>
  );
}

export default App;

설명:

이 예시에서는 폼을 제출할 때 기본적으로 발생하는 페이지 리프레시를 event.preventDefault()로 방지합니다.
동시에 event.stopPropagation()을 사용하여 폼이 포함된 div로 이벤트가 전파되지 않도록 막습니다.
div를 클릭해도 이벤트가 발생하지만, 버튼을 클릭하면 "Form submit prevented and event propagation stopped!"만 출력되고 div의 클릭 이벤트는 실행되지 않습니다.

4. `stopPropagation()`와 `preventDefault()`의 차이점

이제 두 메서드의 차이점을 정리해보겠습니다:

	`stopPropagation()`	`preventDefault()`
역할	이벤트가 부모나 상위 요소로 전파되는 것을 막음	이벤트의 기본 동작을 막음
주요 사용 사례	이벤트 버블링 또는 캡처링을 중단하고 싶을 때	링크 클릭, 폼 제출 등의 기본 동작을 방지하고 싶을 때
영향 범위	DOM 트리의 상위 요소로 이벤트가 전달되지 않음	이벤트 자체의 동작은 유지되지만, 기본 동작만 방지됨

5. 언제 사용해야 할까?

stopPropagation() 사용 시점:
- 이벤트 전파가 더 이상 필요 없을 때.
- 클릭, 포커스, 키보드 입력 등 하위 요소에서 발생한 이벤트가 부모 요소에 영향을 주지 않도록 하고 싶을 때.
preventDefault() 사용 시점:
- 기본적인 브라우저 동작을 막고, 커스텀 처리를 하고 싶을 때.
- 폼 제출 시 페이지 리프레시를 막고, AJAX로 데이터를 전송하는 등의 동작을 구현할 때.

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

1. `stopPropagation()` 예시 (React)

stopPropagation()을 사용하여 이벤트가 부모 컴포넌트로 전파되지 않도록 하는 React 예제를 살펴보겠습니다.

import React from "react";

function App() {
  const handleDivClick = () => {
    console.log("Div clicked!");
  };

  const handleButtonClick = (event) => {
    event.stopPropagation(); // 부모로의 이벤트 전파 중단
    console.log("Button clicked!");
  };

  return (
    <div onClick={handleDivClick} style={{ padding: "20px", backgroundColor: "lightgray" }}>
      <button onClick={handleButtonClick}>Click Me</button>
    </div>
  );
}

export default App;

설명:

위 코드에서 div를 클릭하면 handleDivClick 함수가 호출되어 "Div clicked!"가 출력됩니다.
하지만 버튼을 클릭할 때 event.stopPropagation()을 호출하므로, 버튼을 클릭해도 이벤트가 부모인 div로 전파되지 않고, "Button clicked!"만 출력됩니다.

2. `preventDefault()` 예시 (React)

import React from "react";

function App() {
  const handleLinkClick = (event) => {
    event.preventDefault(); // 링크의 기본 동작(페이지 이동)을 막음
    console.log("Link click prevented, staying on the same page!");
  };

  return (
    <div>
      <a href="https://www.google.com" onClick={handleLinkClick}>
        Go to Google
      </a>
    </div>
  );
}

export default App;

설명:

기본적으로 <a> 태그를 클릭하면 해당 href 속성에 있는 URL로 이동하게 됩니다.
그러나 event.preventDefault()를 사용하면 클릭해도 페이지가 이동하지 않고, 콘솔에 "Link click prevented, staying on the same page!"라는 메시지만 출력됩니다.

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시

때로는 특정 이벤트가 부모로 전파되는 것도 막고, 기본 동작도 방지해야 할 때가 있습니다. 이럴 때 두 메서드를 함께 사용할 수 있습니다.

import React from "react";

function App() {
  const handleDivClick = () => {
    console.log("Div clicked!");
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();  // 기본 폼 제출 방지
    event.stopPropagation(); // 부모로 이벤트 전파 중단
    console.log("Form submit prevented and event propagation stopped!");
  };

  return (
    <div onClick={handleDivClick} style={{ padding: "20px", backgroundColor: "lightgray" }}>
      <form onSubmit={handleFormSubmit}>
        <button type="submit">Submit Form</button>
      </form>
    </div>
  );
}

export default App;

설명:

이 예시에서는 폼을 제출할 때 기본적으로 발생하는 페이지 리프레시를 event.preventDefault()로 방지합니다.
동시에 event.stopPropagation()을 사용하여 폼이 포함된 div로 이벤트가 전파되지 않도록 막습니다.
div를 클릭해도 이벤트가 발생하지만, 버튼을 클릭하면 "Form submit prevented and event propagation stopped!"만 출력되고 div의 클릭 이벤트는 실행되지 않습니다.

결론

stopPropagation()과 preventDefault()는 비슷하게 보일 수 있지만, 서로 다른 목적을 가지고 있습니다. 이벤트 전파를 막고 싶다면 stopPropagation()을, 기본 브라우저 동작을 막고 싶다면 preventDefault()를 사용해야 합니다. 이 두 메서드를 적절히 사용하면, 보다 유연하고 강력한 이벤트 처리를 할 수 있습니다.

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

[자바스크립트] location.reload(), 사용법과 주의점 (0)	2024.02.16
[자바스크립트] 1 + '1' = '11' (2)	2024.01.23
[Javascript] 자바스크립트 - 날짜, 시간 표기 (0)	2023.10.23
[Javascript] 배열(array)의 객체별(objects)로 값(value)을 정렬하려면 어떻게 해야 하나요? (0)	2023.10.09
[Javascript] 문자열 일정 수 넘어가면 자르기 (1)	2023.10.07

Contents

새소식

인기 검색어

[자바스크립트] stopPropagation()와 preventDefault()이란? 그리고 차이점

이벤트 처리에서 `stopPropagation`와 `preventDefault`의 차이점

1. `stopPropagation()` 메서드란?

이벤트 전파 방식

리액트 예시

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

1. `stopPropagation()` 예시 (React)

설명:

2. `preventDefault()` 예시 (React)

설명:

2. `preventDefault()` 메서드란?

사용 예시

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시

설명:

4. `stopPropagation()`와 `preventDefault()`의 차이점

5. 언제 사용해야 할까?

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

1. `stopPropagation()` 예시 (React)

설명:

2. `preventDefault()` 예시 (React)

설명:

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시

설명:

결론

'Language > Javascript' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바

[자바스크립트] stopPropagation()와 preventDefault()이란? 그리고 차이점

이벤트 처리에서 stopPropagation와 preventDefault의 차이점

1. stopPropagation() 메서드란?

이벤트 전파 방식

리액트 예시

stopPropagation과 preventDefault를 React에서 사용하는 방법

1. stopPropagation() 예시 (React)

설명:

2. preventDefault() 예시 (React)

설명:

2. preventDefault() 메서드란?

사용 예시

3. stopPropagation()과 preventDefault()를 함께 사용하는 예시

설명:

4. stopPropagation()와 preventDefault()의 차이점

5. 언제 사용해야 할까?

stopPropagation과 preventDefault를 React에서 사용하는 방법

1. stopPropagation() 예시 (React)

설명:

2. preventDefault() 예시 (React)

설명:

3. stopPropagation()과 preventDefault()를 함께 사용하는 예시

설명:

결론

'Language > Javascript' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바

이벤트 처리에서 `stopPropagation`와 `preventDefault`의 차이점

1. `stopPropagation()` 메서드란?

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

1. `stopPropagation()` 예시 (React)

2. `preventDefault()` 예시 (React)

2. `preventDefault()` 메서드란?

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시

4. `stopPropagation()`와 `preventDefault()`의 차이점

`stopPropagation`과 `preventDefault`를 React에서 사용하는 방법

1. `stopPropagation()` 예시 (React)

2. `preventDefault()` 예시 (React)

3. `stopPropagation()`과 `preventDefault()`를 함께 사용하는 예시