event.stopPropagation()과 event.preventDefault()의 차이

루비·2024년 6월 24일

JavaScript preventDefault stopPropagation typescript

Typescript

목록 보기

6/8

stopPropagation과 preventDefault는 JavaScript에서 이벤트를 제어하는 두 가지 주요 방법입니다. 이 두 메서드는 이벤트의 동작과 흐름을 관리하는데 각각 다르게 작용합니다.

`event.preventDefault()`

preventDefault는 이벤트의 기본 동작을 방지합니다. 이벤트가 발생할 때, 그 이벤트에 대해 브라우저가 기본적으로 수행하는 동작을 막고 싶을 때 사용합니다.

예시

폼 제출: 폼의 기본 제출 동작을 막고, JavaScript로 제어하고 싶을 때.
링크 클릭: 링크를 클릭했을 때, 페이지 이동을 막고, JavaScript로 제어하고 싶을 때.

사용 예시

폼 제출을 방지하는 예:

import React from 'react';

const MyComponent = () => {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // 기본 제출 방지
    console.log('폼 제출이 막혔습니다!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyComponent;

`event.stopPropagation()`

stopPropagation은 이벤트가 다른 이벤트 리스너로 전파되는 것을 막습니다. 특히, 부모 요소로 이벤트가 전달되는 "버블링"을 막고 싶을 때 유용합니다. 이벤트 캡처링 단계에서도 사용할 수 있으며, stopPropagation을 호출하면 해당 이벤트가 더 이상 버블링 또는 캡처링되지 않습니다.

예시

중첩된 이벤트 리스너: 자식 요소의 클릭 이벤트가 부모 요소로 전파되지 않도록 막고 싶을 때.
모달: 모달 내부에서 클릭 이벤트가 모달 바깥의 부모 요소로 전달되지 않도록 막고 싶을 때.

사용 예시

자식 요소의 클릭 이벤트가 부모 요소로 전파되지 않도록 하는 예:

import React from 'react';

const MyComponent = () => {
  const handleParentClick = () => {
    console.log('부모 요소 클릭됨!');
  };

  const handleChildClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation(); // 이벤트 전파 방지
    console.log('자식 요소 클릭됨!');
  };

  return (
    <div onClick={handleParentClick}>
      <div onClick={handleChildClick}>
        자식 요소
      </div>
    </div>
  );
};

export default MyComponent;

차이점 요약

preventDefault: 이벤트의 기본 동작을 방지합니다. 브라우저의 기본 동작 (예: 폼 제출, 링크 이동 등) 을 막습니다.
stopPropagation: 이벤트가 더 이상 상위 요소로 전파되지 않도록 막습니다. 이벤트가 부모 요소에게 전달되는 것을 방지합니다.

함께 사용하기

때로는 이벤트의 기본 동작을 막고 전파도 방지하고 싶을 때 두 메서드를 함께 사용할 수 있습니다.

import React from 'react';

const MyComponent = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();   // 기본 동작 방지
    event.stopPropagation();  // 이벤트 전파 방지
    console.log('버튼 클릭 이벤트가 막혔습니다!');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
};

export default MyComponent;