이벤트 버블링 막기

1. 이벤트 버블링이란?

이벤트가 상위 요소로 퍼지는 현상.
자식 요소를 클릭해도 부모요소와 부모요소의 부모요소와 부모요소의 부모요소의 부모요소........등 더이상 부모요소를 만나지 않을 때 까지 상위요소를 함께 클릭하게 되는 현상.

2. 방지하는 법

<span
	onClick={() => {
  	setGood(good + 1);
	}}
  >
    👍
</span>

위 코드는 좋아요 버튼을 누르면 숫자가 올라가는 기능을 수행한다.
그러나 상위요소도 함께 클릭되기 때문에 의도치 않은 이벤트가 발생한다.
이러한 이벤트 버블링 현상을 방지하기 위해

<span
	onClick={(e) => {
      e.stopPropagation();
  	setGood(good + 1);
	}}
  >
    👍
</span>

e.stopPropagation() 를 추가로 써준다.