TIL. 이벤트 버블링, 넌 실행되면 안된다고 - 9/5

이벤트 버블링?

생각지도 못한 이벤트가 발생했다.
그 정체는 나를 감싸고 있는 부모요소.

이벤트 버블링이란 보통 선택한 엘리먼트가 속해있는 부모요소에 의하여 발생하는 것으로
어떤 버튼을 클릭하려고 할때 그 버튼을 가지고 있는 부모 요소에 이미 클릭 이벤트가 존재하는 경우를 말할 수 있습니다.

이러한 현상을 이벤트 버블링이라고 합니다.

이 경우 우리는 어떻게 해야할까?

이벤트 중단 방법들

• event.preventDefault(): 현재 이벤트의 기본 동작을 중단한다.
• event.stopPropagation(): 현재 이벤트가 상위로 전달되지 않도록 중단한다.
• event.stopImmediatePropagation(): 현재 이벤트가 상위뿐아니라 현재 레벨에 걸린 다른 이벤트도 작동하지 않도록 중단한다.

우리는 여기서 stopPropagation()을 사용하면 될 것 같습니다.

❌ stopPropagation()

event.stopPropagation()는 위에서 말한대로 현재 이벤트가 상위로 전달되지 않도록 합니다.
즉 부모요소에서 클릭시 이벤트가 발생하게 해놨다면 자식을 클릭해도 부모요소에게 자식이 클릭됐다는 것을 알리지 않는다고 볼 수 있죠. (부모몰래?)🙊

코드를 봅시다.

const clickOnDiv =()=>{
  console.log('1')
}

const clickOnSpan=()=>{
  console.log('2')
}

//

<div onClick={clickOndiv}>
  <span onClick={clickOnSpan} />
</div>

자 그러면 div를 누른다면 당연히 console에 1이 찍히겠죠
그렇다면 span을 누르면??

네 2가 찍히고 2도 찍힌답니다 ㅠㅠ

그래서 이럴때 부모의 이벤트가 일어나지 않도록 '나 안눌렸어'를 해주는
event.stopPropagation()을 사용해 줍니다.

const clickOnDiv =()=>{
  console.log('1')
}

const clickOnSpan=()=>{
  event.stopPropagation()
  console.log('2')
}

//

<div onClick={clickOndiv}>
  <span onClick={clickOnSpan} />
</div>

그러면 놀랍게도 눌러도
부모의 함수는 실행되지 않습니다.

이렇게 이벤트 버블링을 해결 할 수가 있습니다.

저는 이걸 모달에 사용해 볼 예정입니다 ㅎㅎㅎ

오늘은 여기까지!🎬