리액트에서 이벤트 버블링 체험하기

event bubbling이 무엇이고 어떻게 사용해야할까?

 

 

저번 글에서 우리는 자바스크립트에서 이벤트 버블링에 대해 알아봤습니다.

이벤트 버블링은 브라우저가 이벤트를 감지하는 방법에 의해 생긴 기능이며 이 기능을 이용해 하나의 eventListener로 여러 태그에 이벤트를 줄 수 있다는 것을 확인했습니다.

 

이번 글에선 자바스크립트의 프레임워크인 리액트에서 어떻게 이벤트 버블링을 사용하는지 알아보겠습니다.

 

1. 하나의 클릭 이벤트를 이용해 여러 태그에 이벤트 주기

import { useState } from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("0");
  const bubble = (e: React.MouseEvent<HTMLParagraphElement>) => {
    const target = e.target as HTMLInputElement;
    setValue(target.id);
  };

  return (
    <div className="App" onClick={bubble}>
      <h1>What is Event Bubbling</h1>
      <div id="1">1</div>
      <div id="2">2</div>
      <div id="3">3</div>
      <div id="4">4</div>
      <div id="5">5</div>
      <div id="6">6</div>
      <div id="7">7</div>
      <h1>{value}</h1>
    </div>
  );
}

export default App;

 

코드를 간단히 살펴보자면 제일 루트에 가까운 div에 onClick 이벤트를 입력했습니다.

onClick 이벤트는 target을 누르면 id를 setValue에 입력하라는 간단한 이벤트입니다.

그리고 그 안에 id가 숫자인 div를 7개 만들었습니다.

그 후 value를 출력하도록 하였는데요.

 

신기하게도 가장 바깥에 있는 div태그에만 이벤트를 걸었지만 이벤트 버블링 때문에 안에 있는 div태그들에도 이벤트가 적용됩니다.

 

이와 같이 같은 이벤트를 적용시켜야하는 태그들에 한번에 이벤트를 적용시키며 이벤트 버블링을 활용할 수 있습니다.

 

2. 이벤트 버블링 막기

import "./App.css";

function App() {
  const bubble = (e: React.MouseEvent<HTMLParagraphElement>) => {
    const target = e.target as HTMLInputElement;
    alert(target.className);
  };

  return (
    <div className="App" onClick={bubble}>
      <div className="AppTwo" onClick={bubble}></div>
    </div>
  );
}

export default App;

위 코드를 간단히 설명하자면

className이 App인 div태그 안에 className이 AppTwo인 div태그를 만들었습니다.

onClick이벤트로는 div를 클릭하면 className을 경고창으로 띄워주도록 했습니다.

 

이때 빨간 상자를 클릭하면 하나의 경고창('App')이 뜨며 잘 작동하지만

파란 상자를 클릭하면 두번의 경고창('AppTwo')이 뜨며 의도하지 않은 이벤트가 발생합니다.

 

이는 이벤트 버블링 때문에 생긴 문제이며 간단한 코드로 문제를 해결할 수 있습니다.

const bubble = (e: React.MouseEvent<HTMLParagraphElement>) => {
    e.stopPropagation();
    const target = e.target as HTMLInputElement;
    alert(target.className);
  };

바로 bubble이라는 이벤트에 e.stopPropagation()을 넣어주면 되는데요.

앞선 글에서 설명했다 시피 자바스크립트는 이벤트 버블링을 막아주는 기능을 제공해주며 이를 활용하면 의도하지 않은 이벤트를 안나오게 할 수 있습니다.