onClick 이벤트 전파

React에서 onClick 이벤트 핸들러를 등록하여 클릭 이벤트가 발생하면 이벤트가 발생한 요소 뿐만 아니라 부모 요소까지 이벤트가 전파된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function App() {
  return (
    <div className="App" onClick={() => console.log("container clicked.")}>
      <div className="parent" onClick={() => console.log("parent clicked.")}>
        <button
          className="child"
          onClick={() => {
            console.log("child clicked.");
          }}
        >
          버튼
        </button>
      </div>
    </div>
  );
}

export default App;
1
2
3
child clicked
parent clicked
container clicked
  • child를 클릭하면 console 창에 다음과 같이 출력된다.
  • 이벤트가 발생한 요소부터 이벤트 핸들러가 호출되고 부모 방향으로 이벤트가 전파된다.

간혹 부모 요소에서 이벤트가 발생하기를 원하지 않을 경우 이러한 이벤트 전파를 막아야한다.

그 방법으로는 event.stopPropagation()이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function App() {
  return (
    <div className="App" onClick={() => console.log("container clicked.")}>
      <div className="parent" onClick={() => console.log("parent clicked.")}>
        <button
          className="child"
          onClick={(e) => {
            e.stopPropagation();
            console.log("child clicked.");
          }}
        >
          버튼
        </button>
      </div>
    </div>
  );
}

export default App;
1
child clicked.
  • 이벤트 전파가 발생하지 않고 이벤트가 발생한 요소만 이벤트 핸들러가 호출된다.