diff --git a/.eslintrc b/.eslintrc
index 2738ee4..b6fa3ce 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -37,5 +37,7 @@
"import/extensions": "off",
"react/jsx-filename-extension": "off",
"implicit-arrow-linebreak": "off",
+ "no-colsole": "off",
+ "@typescript-eslint/no-unused-expressions": "off"
}
}
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index c7e88da..b63da15 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/blog/2024-11-17-event-propagation-of-react.mdx b/blog/2024-11-17-event-propagation-of-react.mdx
new file mode 100644
index 0000000..36490b1
--- /dev/null
+++ b/blog/2024-11-17-event-propagation-of-react.mdx
@@ -0,0 +1,271 @@
+---
+slug: event-propagation-of-react
+title: React의 이벤트 전파
+description: React의 이벤트 전파는 Javascript와 다르다
+keywords:
+ - react
+ - event
+ - event-propagation
+ - web
+authors: HyunmoAhn
+tags: [react, event, event-propagation, web, issue, trouble-shooting]
+---
+
+
+
+## Introduction
+React 이벤트 핸들러 방식과 vanilla Javascript의 이벤트 핸들러 방식을 혼용해서 사용할 때 이벤트 전파가 의도한대로 동작하지 않을 수 있다.
+예를 들면 아래와 같이 `button1`, `button2` 구조에서 `button2`를 클릭했을 때 `button1의` 이벤트 핸들러도 실행되는 문제가 발생한다.
+
+```tsx
+const buttonEl = document.getElementById('button1');
+buttonEl.addEventListener('click', () => {
+ console.log('button1 clicked');
+});
+
+const handleClick = (e) => {
+ e.stopPropagation();
+ console.log('button2 clicked');
+};
+
+return (
+
+ Click me
+
+);
+```
+
+```
+// When button2 is clicked
+button2 clicked
+button1 clicked
+```
+
+## Solution
+
+React에서 이벤트 전파는 vanilla Javascript에서 사용하는 이벤트 전파와 다르다.
+React에서 이벤트 전파를 delegation 방식으로 처리하기 때문이다. ([comment](https://github.com/facebook/react/issues/13635#issuecomment-421085767))
+
+React에서는 ([React 17 이후로](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation)) 이벤트 리스너를 rootDOM에 등록해서 사용한다.
+따라서 React끼리의 event listener는 생각한 대로 DOM 구조에 따라 이벤트가 전파가 전달되지만 vanilla Javascript의 이벤트 전파는 생각대로 동작하지 않는다.
+
+가능하다면 두가지 이벤트를 섞어서 쓰지 않는 방향이 좋겠지만, 3rd party library를 사용하거나 제어하지 못하는 부분의 이벤트는 제어하기 힘들기 때문에 동작 방식에 맞춰 이벤트 전파를 막아야한다.
+
+```tsx
+// Unify event listener to vanilla Javascript
+const buttonEl = document.getElementById('button1');
+buttonEl.addEventListener('click', () => {
+ console.log('button1 clicked');
+});
+
+const button2El = document.getElementById('button2');
+button2El.addEventListener('click', (e) => {
+ e.stopPropagation();
+ console.log('button2 clicked');
+});
+
+return (
+
+ Click me
+
+);
+
+// Or
+// Unify event listener to React
+const handleClick1 = (e) => {
+ console.log('button1 clicked');
+};
+
+const handleClick = (e) => {
+ e.stopPropagation();
+ console.log('button2 clicked');
+};
+
+return (
+
+ Click me
+
+);
+```
+
+import { BasicEventPlayground, BothEventPlayground, BothStopEventPlayground, BothStopCapturingEventPlayground } from '@site/src/code-snippet/reactEventPropagation/index.tsx'
+import { Figure } from '@site/src/components/common/Figure/index.tsx'
+
+## Step by Step
+
+:::note
+이 내용은 Javascript의 Event Bubbling & Capturing을 이해하고 있다는 가정하에 설명한다. e.stopPropagation()}>
+
+// Vanilla
+button.addEventListener('click', (e) => {
+ e.stopPropagation();
+});
+```
+
+:::
+
+
+`Figure 4`는 `#2` 의 React Event bubbling을 막은 경우이고, `Figure 5`는 `#2`의 Vanilla Event bubbling을 막은 경우이다.
+
+
+
+
Figure 4. #2 Stop Bubbling by React
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ✅ | ✅ | Capture |
+ | 4 | `#3` | ✅ | ✅ | Bubble |
+ | 5 | `#2` | ✅ | ✅ | Bubble |
+ | 6 | `#1` | ✅ | ❌ | Bubble |
+
+
+
+
Figure 5. #2 Stop Bubbling by Vanilla
+
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ✅ | ✅ | Capture |
+ | 4 | `#3` | ✅ | ❌ | Bubble |
+ | 5 | `#2` | ✅ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+
+
+이 사실을 기반하여 `Figure 4`와 `Figure 5`의 동작이 다른지 이해 할 수 있다.
+
+`Figure 4`는 React 이벤트의 전파를 막았기 때문에 실제 이벤트는 `rootDOM`에서 `stopPropagation`이 동작한다. 이는 실제로는 React 내부에서 이벤트 전파를 구현했다고 표현하는 게 맞을 것 같다.
+따라서 실제 이벤트는 다음과 같은 순서로 발생한다.
+
+1. `rootDOM`의 react event capturing
+2. `#1, #2, #3`에서의 vanilla javascript event capturing
+3. `#1, #2, #3`에서의 vanilla javascript event bubbling
+4. `rootDOM`의 react event bubbling
+
+따라서 `Figure 4`에서의 이벤트는 3번, `#1, #2, #3`에서의 event bubbling을 막지 못하여서 vanilla javascript의 이벤트가 모두 발생하였다.
+
+그렇다면 `Figure 5`는 어떻게 될까? `#2`에서 vanilla javascript의 이벤트를 막았기 때문에, 3번의 이벤트 중 `#2`에서 이벤트 전파가 중단 되었고 `#3`과 4번, rootDOM으로의 이벤트가 발생하지 않았다.
+따라서 `Figure 5`의 이벤트에서 React의 모든 bubbling 이벤트가 중단 된 것이다.
+
+그럼 다른 예제로 Capturing을 막는 건 어떨까? 아래 `Figure 7,8`을 살펴보자. 실행 전 동작을 예상해 보는 것도 재미있을 것 같다.
+두 예제 모두 `#2`에서의 event capturing을 막았다.
+
+
+
+
Figure 7. #2 Stop Capturing by React
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ❌ | ✅ | Capture |
+ | 2 | `#2` | ❌ | ✅ | Capture |
+ | 3 | `#3` | ❌ | ❌ | Capture |
+ | 4 | `#3` | ❌ | ❌ | Bubble |
+ | 5 | `#2` | ❌ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+
Figure 8. #2 Stop Capturing by Vanilla
+
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ❌ | ✅ | Capture |
+ | 4 | `#3` | ❌ | ❌ | Bubble |
+ | 5 | `#2` | ❌ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+ Click me
+
+);
+```
+
+```
+// When button2 is clicked
+button2 clicked
+button1 clicked
+```
+
+## Solution
+
+Event propagation in React differs from that in vanilla Javascript
+because React handles event propagation using a delegation method. ([comment](https://github.com/facebook/react/issues/13635#issuecomment-421085767))
+
+In React ([post React 17](https://legacy.reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation)),
+event listeners are registered on the rootDOM.
+Therefore, event listeners within React propagate as expected according to the DOM structure,
+but vanilla Javascript event propagation may not behave as anticipated.
+
+While it's best to avoid mixing the two types of events,
+sometimes it's unavoidable when using third-party libraries or handling parts of the code you can't control.
+In such cases, you must block event propagation according to the behavior of each method.
+
+```tsx
+// Unify event listener to vanilla Javascript
+const buttonEl = document.getElementById('button1');
+buttonEl.addEventListener('click', () => {
+ console.log('button1 clicked');
+});
+
+const button2El = document.getElementById('button2');
+button2El.addEventListener('click', (e) => {
+ e.stopPropagation();
+ console.log('button2 clicked');
+});
+
+return (
+
+ Click me
+
+);
+
+// Or
+// Unify event listener to React
+const handleClick1 = (e) => {
+ console.log('button1 clicked');
+};
+
+const handleClick = (e) => {
+ e.stopPropagation();
+ console.log('button2 clicked');
+};
+
+return (
+
+ Click me
+
+);
+```
+
+import { BasicEventPlayground, BothEventPlayground, BothStopEventPlayground, BothStopCapturingEventPlayground } from '@site/src/code-snippet/reactEventPropagation/index.tsx'
+import { Figure } from '@site/src/components/common/Figure/index.tsx'
+
+## Step by Step
+
+:::note
+This explanation assumes you have an understanding of Javascript's Event Bubbling & Capturing. e.stopPropagation()}>
+
+// Vanilla
+button.addEventListener('click', (e) => {
+ e.stopPropagation();
+});
+```
+
+:::
+
+`Figure 4` blocks React Event bubbling on `#2`, and `Figure 5` blocks Vanilla Event bubbling on `#2`.
+
+
+
+
Figure 4. #2 Stop Bubbling by React
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ✅ | ✅ | Capture |
+ | 4 | `#3` | ✅ | ✅ | Bubble |
+ | 5 | `#2` | ✅ | ✅ | Bubble |
+ | 6 | `#1` | ✅ | ❌ | Bubble |
+
+
+
+
Figure 5. #2 Stop Bubbling by Vanilla
+
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ✅ | ✅ | Capture |
+ | 4 | `#3` | ✅ | ❌ | Bubble |
+ | 5 | `#2` | ✅ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+
+
+Based on this fact, we can understand why the behavior of `Figure 4` and `Figure 5` differs.
+
+In `Figure 4`, React event propagation was blocked, so the actual event propagation occurs at the `rootDOM`.
+This means the event propagation is actually implemented within React.
+Therefore, the actual event occurs in the following order:
+
+1. React event capturing at `rootDOM`
+2. Vanilla javascript event capturing at `#1, #2, #3`
+3. Vanilla javascript event bubbling at `#1, #2, #3`
+4. React event bubbling at `rootDOM`
+
+Therefore, in `Figure 4`, the event propagation wasn't blocked during the 3rd step, the bubbling at `#1, #2, #3`,
+so all vanilla javascript events occurred.
+
+So what about `Figure 5`?
+Since vanilla javascript's event was blocked at `#2`,
+the event propagation was interrupted on `#2` during the 3rd step,
+and no events occurred at `#3` or during the 4th step, at the rootDOM.
+Therefore, all React bubbling events in `Figure 5` were interrupted.
+
+What about blocking Capturing in another example?
+Let's look at `Figure 7,8`. It might be interesting to predict the behavior before running it.
+Both examples blocked event capturing at `#2`.
+
+
+
+
+
Figure 7. #2 Stop Capturing by React
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ❌ | ✅ | Capture |
+ | 2 | `#2` | ❌ | ✅ | Capture |
+ | 3 | `#3` | ❌ | ❌ | Capture |
+ | 4 | `#3` | ❌ | ❌ | Bubble |
+ | 5 | `#2` | ❌ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+
Figure 8. #2 Stop Capturing by Vanilla
+
+ | Order | Target | Vanilla | React | Type |
+ | --- | --- | --- | --- | --- |
+ | 1 | `#1` | ✅ | ✅ | Capture |
+ | 2 | `#2` | ✅ | ✅ | Capture |
+ | 3 | `#3` | ❌ | ✅ | Capture |
+ | 4 | `#3` | ❌ | ❌ | Bubble |
+ | 5 | `#2` | ❌ | ❌ | Bubble |
+ | 6 | `#1` | ❌ | ❌ | Bubble |
+
+
+
+
+ {children}
+
+
+);
+
+interface EventPlaygroundProps {
+ label?: string;
+ children?: ReactNode;
+ reset?: boolean;
+ skipReact?: boolean;
+ skipVanilla?: boolean;
+ reactStopBubble?: boolean;
+ reactStopCapture?: boolean;
+ vanillaStopBubble?: boolean;
+ vanillaStopCapture?: boolean;
+}
+
+export const EventPlayground = ({
+ label,
+ children,
+ reset,
+ skipReact,
+ skipVanilla,
+ reactStopBubble,
+ reactStopCapture,
+ vanillaStopBubble,
+ vanillaStopCapture,
+}: EventPlaygroundProps) => {
+ const id = useId();
+ const reactEventController = useContext(ReactEventPlaygroundContext);
+ const vanillaEventController = useContext(VanillaEventPlaygroundContext);
+ const [reactEvent, setReactEvent] = useState(false);
+ const [vanillaEvent, setVanillaEvent] = useState(false);
+
+ const handleReactClick = () => {
+ if (!skipReact) {
+ reactEventController.register(() => {
+ setReactEvent(true);
+ });
+ reactEventController.register(async () => {
+ await timeout(DELAY);
+ });
+ reactEventController.register(() => {
+ setReactEvent(false);
+ });
+ }
+ };
+
+ const handleReactClickCapture = (e: MouseEvent) => {
+ if (reset) {
+ reactEventController.clear();
+ }
+ reactStopCapture && e.stopPropagation();
+ handleReactClick();
+ };
+
+ const handleReactClickBubble = (e: MouseEvent) => {
+ reactStopBubble && e.stopPropagation();
+ handleReactClick();
+ };
+
+ useEffect(() => {
+ const handleVanillaClick = (e: Event) => {
+ if (!skipVanilla) {
+ vanillaEventController.register(() => {
+ setVanillaEvent(true);
+ });
+ vanillaEventController.register(async () => {
+ await timeout(DELAY);
+ });
+ vanillaEventController.register(() => {
+ setVanillaEvent(false);
+ });
+ }
+ };
+ const handleVanillaClickBubble = (e: Event) => {
+ vanillaStopBubble && e.stopPropagation();
+ handleVanillaClick(e);
+ };
+
+ const handleVanillaClickCapture = (e: Event) => {
+ if (reset) {
+ vanillaEventController.clear();
+ }
+ vanillaStopCapture && e.stopPropagation();
+ handleVanillaClick(e);
+ };
+
+ const button = document.getElementById(id);
+
+ button.addEventListener('click', handleVanillaClickCapture, { capture: true });
+ button.addEventListener('click', handleVanillaClickBubble, { capture: false });
+ return () => {
+ button.removeEventListener('click', handleVanillaClickCapture, {
+ capture: true,
+ });
+ button.removeEventListener('click', handleVanillaClickBubble, {
+ capture: false,
+ });
+ };
+ }, [id, reset, skipVanilla, vanillaStopBubble, vanillaStopCapture]);
+
+ return (
+ // eslint-disable-next-line max-len
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
+
{label}
+
+ {reactEvent && (
+ <>
+
+
React Event
+
+ )}
+ {vanillaEvent && (
+ <>
+
+
Vanilla Event
+
+ )}
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const BothEventPlayground = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export const BothStopEventPlayground = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const BothStopCapturingEventPlayground = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/common/Figure/Figure.module.scss b/src/components/common/Figure/Figure.module.scss
new file mode 100644
index 0000000..357ced2
--- /dev/null
+++ b/src/components/common/Figure/Figure.module.scss
@@ -0,0 +1,28 @@
+.figureContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ column-gap: 5px;
+ padding: 10px;
+ flex: 1;
+
+ .titleContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ column-gap: 10px;
+ cursor: default;
+ margin: 10px 0 15px;
+
+ .indexing {
+ font-weight: 700;
+ color: var(--color-gray-darker);
+ }
+
+ .title {
+ font-style: italic;
+ color: var(--ifm-color-primary-light);
+ }
+ }
+}
diff --git a/src/components/common/Figure/index.tsx b/src/components/common/Figure/index.tsx
new file mode 100644
index 0000000..8b77721
--- /dev/null
+++ b/src/components/common/Figure/index.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import style from './Figure.module.scss';
+
+export interface FigureProps {
+ index: number;
+ title: string;
+ children: ReactNode;
+}
+
+export const Figure = ({ index, title, children }: FigureProps) => {
+ return (
+
+ {children}
+
+ Figure {index}
+ {title}
+
+
+