👇 일단 이벤트 버블링과 이벤트 캡처링에 대해서 미리 알아야한다!
간단히 정리하자면, 이벤트 버블링이라는 것은 자식에서 부모 요소로 이벤트가 전파되는 방식을 말하고
이벤트 캡처링이라는 것은 부모에서 자식 요소로 이벤트가 전파되는 방식을 말한다.
[JavaScript] 이벤트 버블링, 이벤트 캡쳐
📌 이벤트 버블링 - Event Bubbling 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 아래 콘솔 창은 three className
uiop5809.tistory.com
📌 합성 이벤트(SyntheticEvent)
JS에서 이벤트 버블링과 캡처링에 대해서 이해가 끝났다면, 이제 리액트의 합성 이벤트에 대해서 알아보겠다!
원래 기본 이벤트 핸들러들은 이벤트 버블링 단계에서 호출된다. 그러나, 이벤트 이름에 Capture를 덧붙이면 이벤트 캡처링을 할 수 있으며 버블링 단계 이전에 호출된다. 예를 들어 onClick 대신 onClickCapture를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있다.
❓이걸 언제 쓰는지
자식보다 부모가 먼저 클릭을 인지하도록 만들고 싶을 때 쓴다!
합성 이벤트(SyntheticEvent) – React
A JavaScript library for building user interfaces
ko.reactjs.org
예상했던대로, 이벤트 이름에 Cpature를 붙여준 이벤트가 먼저 호출되고 다음으로 버블링이 일어나는 것을 볼 수 있다.
Capture > target(이벤트가 일어난 가장 안 쪽) > Bubble
'🍞 Front-End > React' 카테고리의 다른 글
| [React] Portals에 대해서 (0) | 2022.10.27 |
|---|---|
| [React] Memoization (메모이제이션) (0) | 2022.10.25 |
| [React] 네트워크 통신 Fetch API (0) | 2022.10.22 |
| [React] Error 다루기 (0) | 2022.10.21 |
| [React] Ref로 DOM 다루기 & Form 다루기 (0) | 2022.10.21 |