react 이벤트 버블링, 캡처링 필기

https://velog.io/@clfclf3138/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B3%90%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

onClick, onClickCapture라는 이벤트 핸들러가 있다.

부모-자식 관계의 컴포넌트들이 있을 때,

자식 컴포넌트를 click했을 때 최상단 부모로부터 자식까지 onClickCapture에 등록된 함수를 실행하고(여기까지가 이벤트 캡처링), 자식 컴포넌트의 onClick 함수를 실행한 뒤, 다시 부모로 거슬러올라가며 onClick 함수를 실행한다.(이벤트 버블링)

드롭다운의 바깥 영역을 클릭했을 때 드롭다운이 닫히도록 구현하고 싶다면,

바깥 영역 컨테이너 컴포넌트에 state를 "닫는 것에 해당하는 불리안 값"으로 바꾸는 onClick 이벤트 핸들러를 걸고, 자식 컴포넌트에 state를 토글하는 onClick 이벤트 핸들러를 건 뒤, 자식 컴포넌트 onClick 함수 내에 event.stopPropagation() 를 실행해주면 이벤트 버블링과 캡처링?까지 다 막을 수 있는 듯. 그래서 자식 컴포넌트를 눌러서 state를 true로 바꿔줬는데 부모 함수까지 실행되어버려서 도로 false가 되버려 드롭다운을 열자마자 닫히는 상황을 방지할 수 있음.