230404 숙달을 위한 메모: 이벤트처리 - 버블링 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

개념

이벤트 버블링(event bubbling)이란, 이벤트 위임의 작동메커니즘으로, 한 요소에 이벤트 발생 시 할당된 핸들러가 동작하고, 이어서 부모요소 핸들러가 동작, 동작 동작.... 해서 가장 최상단의 조상요소를 만날 때까지 반복되는 것인데, 리액트에서도 마찬가지로 이벤트 버블링이 발생한다.

예시

import React from 'react'

function Bubble() {
    return (
        <div onClick={() => alert('나는 부모태그입니다')}>
            부모태그입니다
            <p onClick={() => alert('나는 p 자식태그입니다')}>
            	p자식태그입니다.
            </p>
        </div>
    )
}

export default Bubble

여기서 자식캐그인 p를 클릭하게되면, 부모인 div에 할당된 이벤트 핸들러까지 함께 실행된다. 이러한 버블링으로 인해 event.target 과 event.currentTarget 간의 차이가 발생하게 되는데, 아래 코드 블럭으로 확인해보자

import React from 'react'

function Bubble() {
    const onClick = (e) => {
        console.log(e.target, e.currentTarget)
        // p 태그 → div 태그 순서로 console.log(event.target, event.currentTarget) 이 실행
    }

    return (
        <div onClick={onClick}>
            부모태그입니다
            <p onClick={onClick}>자식태그입니다</p>
        </div>
    )
}

export default Bubble

 위 코드에서 알 수 있는 부분은, 
1. e.target은 최초의 이벤트가 발생한 요소는 이벤트 버블링이 발생하는 동안 변하지 않는다.
2. e.currentTarget은 이벤트 핸들러가 중첩되어있을 때만 존재하며, 버블링으로 인해 이벤트가 발생하고 있는 현재 요소를 가리킨다.

---

버블링 방지하기

버블링을 막기 위해선 대략 3가지 방법으로는 .stopImmediatePropagation(), .taget조건부 방지 그리고 .stopPropagation()이 있는데, 우선 stopPropagation()을 작성하고 나머지는 추후에 추가하는 것으로 하려한다.
참고로 stopPropagation 이벤트가 복잡하게 중첩되는 정말 필요한 경우에만 사용하는 것을 권장한다.

import React from 'react'

function Bubble() {
    const onClick = (e) => {
        console.log('button is clicked!!!!')
        // 이벤트 버블링으로인해 2번씩 표시됨
        
        //때문에 아래처럼 메소드를 활용하면 방지 할 수 있음
        e.stopPropagation()
        console.log('button is clicked!!!!')
    }

    return (
        <div onClick={onClick}>
            div 부모태그입니다.
            <button onClick={onClick}>버튼 자식태그 입니다.</button>
        </div>
    )
}

export default Bubble