<div id="readability-page-1" class="page"><div>
 <div id="SE-3de897ad-21a4-44be-a41d-607ad6b0d042">
 우리는 onClick, e.preventDefault(), 버블링 같은 이벤트 사용법을 배웠습니다. 그런데 사실 React의 onClick은 진짜 DOM의 onclick이 아닙니다. &lt;button onClick={...}&gt;이라고 써도, 그 버튼에 실제 클릭 리스너가 붙는 게 아니거든요. 그럼 무슨 일이 벌어지는 걸까요? 이번 챕터에서 합성 이벤트(SyntheticEvent)와 이벤트 위임(event delegation)을 들여다봅니다.
 </div> <div id="SE-7308f097-36db-4199-ad2b-eddfc1bf5588">
 SyntheticEvent — 브라우저 차이를 덮는 래퍼
 </div> <div id="SE-7d956aba-4e87-454b-8f79-118040ceb596">
 ​
이벤트 핸들러가 받는 e를 "이벤트 객체"라고만 했죠. 정확히는 이건 SyntheticEvent, 즉 React가 브라우저의 네이티브 이벤트를 감싼 래퍼 객체입니다.
​
왜 감쌀까요? 브라우저마다 이벤트 객체의 동작이 미묘하게 다른데, React가 그 차이를 덮어 어디서나 똑같이 동작하는 일관된 API를 제공하기 위해서입니다. 그래서 우리는 브라우저 호환성을 신경 쓰지 않고 e.target, e.preventDefault(), e.stopPropagation()을 똑같이 쓸 수 있죠.

 </div> <div id="SE-5b2ffd93-8cdb-4a13-863d-a79071971009">
 function SearchInput() {
 function handleChange(e: React.ChangeEvent&lt;HTMLInputElement&gt;) {
 console.log(e.target.value); // 합성 이벤트의 일관된 API
 console.log(e.nativeEvent); // 진짜 브라우저 네이티브 이벤트가 필요하면 여기로
 }
 return &lt;input onChange={handleChange} /&gt;;
}
 </div> <div id="SE-4941de72-759d-4bdc-bc38-9a28761d7910">
 진짜 네이티브 이벤트가 필요하면 e.nativeEvent로 꺼낼 수 있습니다. 하지만 대부분은 합성 이벤트 API만으로 충분합니다.
 </div> <div id="SE-ccb1863e-6469-43fe-bb22-0c8855b90fbc">
 이벤트 위임 — 리스너를 노드마다 달지 않는다
 </div> <div id="SE-ba6c3764-4c28-426c-97ce-3b900dba1b52">
 ​
여기가 핵심입니다. 버튼 1,000개에 각각 onClick을 달면, 실제 DOM에 클릭 리스너가 1,000개 붙을까요? 아닙니다. React는 각 DOM 노드에 리스너를 붙이지 않습니다. 대신 이벤트 종류마다 단 하나의 리스너를 트리 꼭대기(루트)에 붙여두고, 클릭이 발생하면 그 하나의 리스너가 "어느 컴포넌트의 onClick을 불러야 하는지" 판단해 대신 호출합니다. 이걸 이벤트 위임이라고 합니다.

 </div> <div id="SE-dd3684ad-70db-492b-a667-984ec6ab7a48">
 function List({ items }: { items: string[] }) {
 return (
 &lt;ul&gt;
 {items.map((item) =&gt; (
 // 항목이 1000개여도, 실제 DOM 리스너가 1000개 붙는 게 아니다
 &lt;li key={item} onClick={() =&gt; console.log(item)}&gt;{item}&lt;/li&gt;
 ))}
 &lt;/ul&gt;
 );
}
 </div> <div id="SE-b2c6ea82-06e3-46c3-b544-7d56da655316">
 장점은 분명합니다. 메모리와 성능 — 노드마다 리스너를 붙였다 떼는 비용 없이, 리스너 하나로 모든 클릭을 처리하니까요. 우리가 onClick을 아무리 많이 써도 React가 알아서 효율적으로 묶어줍니다.
​
​
React 17+의 변화 — 위임 위치가 바뀌었다
면접에서 종종 파고드는 디테일입니다. 이 단 하나의 리스너를 어디에 붙이느냐가 버전에 따라 달라졌습니다.
​
<ul><li>React 16까지 — document에 붙였습니다.
</li><li>React 17부터(현재 포함) — 앱의 루트 컨테이너(createRoot로 마운트한 그 DOM 노드)에 붙입니다.
</li></ul>​
왜 바꿨을까요? document에 전부 붙이면, 한 페이지에 React 앱이 여러 개 있거나(특히 버전이 다를 때), React를 다른 코드(jQuery 등)와 함께 쓸 때 이벤트가 서로 충돌합니다. 루트 컨테이너로 옮기면 각 앱의 이벤트가 자기 영역 안에 머물러 이런 충돌이 사라집니다. 점진적 마이그레이션도 쉬워지고요.

 </div> <div id="SE-09ec23bd-8883-4bce-8407-bb2e8461dbc3">
 ​
자식의 이벤트가 부모로 거슬러 올라가는 버블링을 봤고, e.stopPropagation()으로 막았죠. 사실 이 버블링은 React의 합성 이벤트 시스템 안에서 일어납니다. React는 루트에서 받은 이벤트를, 컴포넌트 트리를 따라 (대개 DOM 트리와 일치) 자식 → 부모 순으로 핸들러에게 전달합니다.

 </div> <div id="SE-30744abd-b28e-4f0b-9e56-427e5a02a675">
 function Card() {
 return (
 &lt;div onClick={() =&gt; console.log('카드')}&gt;
 &lt;button
 onClick={(e) =&gt; {
 e.stopPropagation(); // React 합성 시스템 안에서 부모로의 전파를 막는다
 console.log('버튼');
 }}
 &gt;
 버튼
 &lt;/button&gt;
 &lt;/div&gt;
 );
}
 </div> <div id="SE-ca940c0c-f5c7-446a-9629-c11c852b1183">
 e.stopPropagation()은 이 합성 시스템 안에서의 전파를 멈춥니다. 그래서 이전 블로그 글에서 본 동작(버튼만 로그, 카드는 안 뜸)이 그대로 성립합니다. 캡처 단계가 필요하면 onClickCapture처럼 Capture를 붙인 핸들러를 씁니다.
​
​
모던 정정 — 이벤트 풀링과 e.persist()는 잊으세요
옛 자료를 보면 "합성 이벤트는 재사용(pooling)되니, 비동기로 쓰려면 e.persist()를 호출하라"는 설명이 자주 나옵니다. React 16 시절 이야기이고, 지금은 아닙니다.
​
React 16은 성능을 위해 합성 이벤트 객체를 재사용(풀링)했습니다. 그래서 이벤트 핸들러가 끝난 뒤 e에 접근하면 값이 초기화돼 있어서, setTimeout 안에서 쓰려면 e.persist()로 "이 이벤트를 살려둬"라고 해야 했죠.
​
React 17부터 이 풀링이 제거됐습니다. 이제 e를 비동기로 써도 멀쩡하고, e.persist()는 필요 없습니다(쓸 수는 있지만 아무 효과 없는 빈 함수에 가깝습니다).

 </div> <div id="SE-99fb441d-74da-4eb3-98c0-20d3c1135294">
 function handleChange(e: React.ChangeEvent&lt;HTMLInputElement&gt;) {
 const value = e.target.value;
 setTimeout(() =&gt; {
 console.log(value); // ✅ 미리 변수에 담아두면 가장 안전
 console.log(e.target); // ✅ React 17+에서는 e에 직접 접근해도 문제없다
 }, 1000);
}
 </div> <div id="SE-d17bb694-7097-48a6-8f7e-a48ef09a3cc3">
 인터넷에서 e.persist()나 "이벤트 풀링" 설명을 보면, 오래된 글이라고 생각하면 됩니다. (CRA를 옛 자료의 신호로 본 것과 같은 맥락이죠.)
​
​
면접 포인트 정리
<ul><li>SyntheticEvent란? React가 네이티브 이벤트를 감싼 크로스 브라우저 래퍼. 일관된 API 제공. 네이티브가 필요하면 e.nativeEvent.
</li><li>이벤트 위임이란? 노드마다 리스너를 붙이지 않고, 이벤트 종류별로 하나의 리스너를 루트에 붙여 위임 처리한다(메모리·성능 이점).
</li><li>React 17 변화? 위임 리스너를 document → 루트 컨테이너로 옮겨, 여러 앱·비React 코드와의 충돌을 줄였다.
</li><li>이벤트 풀링? React 16의 옛 동작. 17부터 제거돼 e.persist()는 더 이상 필요 없다.
</li></ul>
 </div> <div id="SE-8bf951b7-9eb9-40a6-808f-3911d2609ddc">
 ​
<ul><li>React의 onClick은 진짜 DOM onclick이 아니라, 합성 이벤트 시스템을 통한 핸들러다.
</li><li>SyntheticEvent는 네이티브 이벤트를 감싼 크로스 브라우저 래퍼다. 일관된 API를 주고, e.nativeEvent로 원본에 접근한다.
</li><li>React는 이벤트 위임으로, 노드마다가 아니라 루트에 이벤트 종류별 리스너 하나를 두고 처리한다(메모리·성능).
</li><li>React 17부터 위임 위치가 document → 루트 컨테이너로 바뀌었다.
</li><li>버블링·stopPropagation은 React 합성 시스템 안에서 일어난다(7장 동작의 정체).
</li><li>이벤트 풀링·e.persist()는 React 16의 유물이다. 17부터 제거됐으니 신경 쓸 필요 없다.
</li></ul>​
이걸로 1부 "React는 어떻게 동작하는가"가 끝났습니다. Virtual DOM·재조정·Fiber·리렌더·이벤트까지, React 내부의 큰 그림을 그렸습니다. 다음 2부에서는 시즌 1이 입문 범위라 건너뛴 핵심 API들을 하나씩 채웁니다. 그 시작은 에러를 우아하게 다루는 Error Boundary입니다.

 </div> <div id="SE-f9038540-d50f-4c73-84ea-988a3763fa2f">
 ​
<ul><li>Common components — React event object — React 공식 문서 (SyntheticEvent·nativeEvent; 확인: 2026-06-24)
</li><li>React 17 — Changes to Event Delegation — React 공식 블로그 (위임 위치 변경·풀링 제거; 확인: 2026-06-24)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

우리는 onClick, e.preventDefault(), 버블링 같은 이벤트 사용법을 배웠습니다. 그런데 사실 React의 onClick은 진짜 DOM의 onclick이 아닙니다. 이라고 써도, 그 버튼에 실제 클릭 리스너가 붙는 게 아니거든요. 그럼 무슨 일이 벌어지는 걸까요? 이번 챕터에서 합성 이벤트(SyntheticEvent)와 이벤트 위임(event delegation)을 들여다봅니다. SyntheticEvent — 브라우저 차이를 덮는 래퍼 이벤트 핸들러가 받는 e를 "이벤트 객체"라고만 했죠. 정확히는 이건 SyntheticEvent, 즉 React가 브라우저의 네이티브 이벤트를 감싼 래퍼 객체입니다. 왜 감쌀까요? 브라우저마다 이벤트 객체의 동작이 미.......

합성 이벤트와 이벤트 위임 — onClick의 정체

댓글