[❗️Error] 12/13 (최우철) 이벤트 버블링

### what error
- 팀원분께서 작업하시는 맵 관련 작업에서, 지도에 클릭을 하면 특정 모달창이 오픈되도록 하는 작업으로 전환 중, 지도 어느곳을 눌러도 모달창이 뜨는 현상이 발생하여 도움을 요청하셨다

- 오류 상황은 크게 2개로 나뉘어 구분할 수 있었다
1. 지도 위에 있는 검색 창을 눌렀을 때에 모달창이 튀어나옴
2. 검색 후에 나타나는 지도 위의 강아지 이미지 아이콘을 눌렀을 때에 모달창이 튀어나옴

---

### error message

---

### how to reslove

- 코드를 살펴본 결과, 현재 검색창과 검색 후 나타나는 강아지 아이콘 둘 다 상위 부모 컨테이너인 안에 들어있는 것을 확인하였다.
- 여기에 MapContainer에 onClick에 해당하는 이벤트가 작성되어 있으므로 문제되는 것이었다.
- 이벤트 버블링의 개념에 따라, 해당 target을 누르는 순간 이벤트는 크게 3가지 형태로 구분되어 나타난다
1. 상위 노드 객체로부터 시작하여 이벤트가 발생한 타겟까지 최상위 노드부터 시작하여 캡쳐링 과정을 진행한다 (event capturing)
2. 해당 이벤트 타겟의 클릭이벤트에 담긴 함수를 실행한다 (event target)
3. 그 후, 캡쳐링했던 노드객체들에 차례대로 event 객체를 전달해가며 그 노드 객체들의 이벤트 함수들을 실행한다 (event bubbling)

> 이벤트 버블링의 도식화

- 해결 방법 자체는 크게 문제될 건 없었다. event.target에게 캡쳐된 노드객체들에 대한 버블링을 하지 말라는 의미로 "e.stopPropagation"을 호출해주기만 하면 됐다

- 문제는 event를 건네받지 못하는, 정확하게 말하면 kakao의 method가 이벤트객체를 잡아먹고 전달하지 않는 구조물이 문제였는데, 콜백 함수에 이벤트 객체가 전달되지 않으니 e.stopPropagation 을 쓸 수가 없었다

- 해결 방법으로는 이전에 겪어본 바, e.currentTarget을 통해 버블링 상태를 확인할 수 있다는 점에 착안하여 모달 이벤트를 달리 적용하도록 만들었다.

> console.log(event.target, event.currentTarget) 을 적용해봤을 시의 모습

- 이때, 편하게도 맵에 뜨는 마크가 단순한 이미지에 불과했기 떄문에 tagName을 통해 둘을 구분할 수 있었고, 이를 통해 이벤트를 달리 적용할 수 있었다.
> console.log(event.target.tagName, event.currentTarget.tagName) 을 했을때의 결과

### reference

[event bubbling](https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/)