React의 SyntheticEvent: 네이티브 이벤트와의 차이점부터 완벽 활용까지 🚀

React의 SyntheticEvent란 무엇일까?🚁

React를 사용하다 보면 이벤트 객체가 SyntheticEvent라는 것을 알게 될 텐데요.

“왜 React는 네이티브 DOM 이벤트를 그대로 사용하지 않고, SyntheticEvent라는 걸 따로 만들었을까?”

이 글에서 React의 SyntheticEvent를 깊이 파헤치고, 네이티브 이벤트와의 차이점, 그리고 실무에서 마주칠 수 있는 상황까지 모두 다뤄보겠습니다.

---

SyntheticEvent란? 🤔

SyntheticEvent는 React에서 DOM 이벤트를 감싸서 제공하는 래퍼 객체입니다.

React는 브라우저 간의 일관성을 보장하고, 성능 최적화를 위해 이 SyntheticEvent를 사용합니다.

 

한마디로: SyntheticEvent는 네이티브 DOM 이벤트를 추상화한 React만의 이벤트 시스템이에요.

---

왜 SyntheticEvent를 사용할까? 🤷‍♀️

1. 브라우저 간 호환성 보장

브라우저마다 이벤트의 구현 방식이 미묘하게 다릅니다. React는 SyntheticEvent를 통해 이 차이를 감추고, 개발자가 동일한 방식으로 이벤트를 처리할 수 있게 해줘요.

2. 성능 최적화 (이벤트 위임)

React는 모든 이벤트를 루트 DOM 노드에 단 한 번 바인딩합니다. 이후 발생하는 이벤트는 이벤트 위임 방식으로 처리되기 때문에, 많은 DOM 노드에서 이벤트 핸들러를 개별로 등록할 필요가 없어요.

3. 일관된 API 제공

SyntheticEvent는 모든 브라우저에서 동일한 프로퍼티와 메서드를 제공합니다. 개발자는 브라우저마다 달라지는 이벤트 동작을 신경 쓸 필요가 없죠.

---

네이티브 이벤트와의 차이점 🌟

특징	SyntheticEvent	네이티브 DOM 이벤트
브라우저 호환성	React가 일관된 API를 제공	브라우저마다 구현이 다를 수 있음
이벤트 위임	루트 DOM 노드에서 이벤트를 위임받아 처리	각 DOM 요소마다 핸들러 등록 필요
초기화	이벤트 핸들링 후 초기화됨	초기화되지 않고 계속 참조 가능
성능	메모리 사용과 이벤트 등록 횟수를 줄여 성능 최적화	다수의 핸들러 등록 시 메모리 소모

---

SyntheticEvent의 주요 특징 🎯

1. 브라우저 간 일관성

SyntheticEvent는 네이티브 이벤트의 동작을 표준화합니다.

즉, 다양한 브라우저에서 동일한 코드로 이벤트를 처리할 수 있어요.

 

2. 이벤트 위임

React는 루트 DOM 노드에 모든 이벤트를 단 한 번 바인딩합니다.

이후 하위 컴포넌트에서 발생한 이벤트는 위임받아 처리하죠.

이는 메모리 사용량을 줄이고 성능을 최적화하는 핵심 메커니즘이에요.

 

3. 이벤트 객체 초기화

SyntheticEvent는 핸들링 후 자동으로 초기화됩니다.

즉, 이벤트 핸들러가 종료되면 이벤트 객체 내부의 모든 데이터가 제거돼요.

따라서 비동기 작업에서 이벤트 객체를 참조하면 오류가 발생할 수 있습니다.

---

SyntheticEvent의 동작 원리 🛠️

1. 이벤트 발생

사용자가 클릭, 입력, 스크롤 등의 행동을 하면 DOM 이벤트가 발생합니다.

 

2. SyntheticEvent 생성

React가 DOM 이벤트를 감지하고, SyntheticEvent 객체를 생성합니다.

이 객체는 네이티브 이벤트를 감싸면서, React가 제공하는 일관된 API를 담고 있어요.

 

3. 이벤트 핸들러 실행

개발자가 정의한 이벤트 핸들러가 호출됩니다.

이때 SyntheticEvent 객체를 전달받아 사용할 수 있어요.

 

4. 이벤트 객체 초기화

이벤트 핸들러 실행이 완료되면 SyntheticEvent 객체는 초기화됩니다.

더 이상 이 객체를 참조할 수 없으므로, 필요한 데이터를 미리 복사해둬야 해요.

---

SyntheticEvent 초기화 문제와 해결법 🔄

React는 이벤트 객체를 풀(pool)에 재활용해 메모리 사용을 줄입니다.

그래서 이벤트 핸들링이 끝난 뒤에는 객체가 초기화되죠.

초기화된 객체를 참조하려고 하면 다음과 같은 에러를 만날 수 있습니다:

Cannot read properties of null (reading 'target')

 

 

해결 방법: 이벤트 정보 복사하기

function handleClick(event) {
  // 이벤트 객체를 참조하면 에러 발생 가능
  setTimeout(() => console.log(event.target), 1000); // ❌

  // 이벤트 객체에서 필요한 정보를 미리 복사
  const target = event.target;
  setTimeout(() => console.log(target), 1000); // ✅
}

 

해결 방법: 이벤트를 유지하기

function handleClick(event) {
  event.persist(); // 이벤트 객체의 초기화를 막음
  setTimeout(() => console.log(event.target), 1000); // ✅
}

---

React에서 지원하는 SyntheticEvent 종류 📜

React는 다양한 이벤트를 지원합니다. 주요 이벤트와 사용 예제를 살펴볼게요.

 

1. 마우스 이벤트

function MouseExample() {
  const handleClick = (event) => console.log(event.type); // "click"
  return <button onClick={handleClick}>클릭하세요</button>;
}

 

2. 키보드 이벤트

function KeyboardExample() {
  const handleKeyPress = (event) => console.log(event.key); // 입력한 키
  return <input type="text" onKeyPress={handleKeyPress} />;
}

 

3. 폼 이벤트

function FormExample() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 기본 동작 방지
    console.log("폼 제출 완료!");
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">제출</button>
    </form>
  );
}

 

4. 포커스 이벤트

function FocusExample() {
  const handleFocus = () => console.log("포커스 됨!");
  const handleBlur = () => console.log("포커스 해제!");
  return <input onFocus={handleFocus} onBlur={handleBlur} />;
}

---

실무 예제: SyntheticEvent와 비동기 작업 🖥️

function AsyncExample() {
  const [value, setValue] = React.useState("");
  const handleChange = (event) => {
    const inputValue = event.target.value; // 데이터를 복사
    setTimeout(() => console.log(inputValue), 1000); // 안전하게 참조 가능
  };
  return <input type="text" onChange={handleChange} />;
}

---

요약 ✍️

SyntheticEvent란?

React에서 제공하는 표준화된 이벤트 객체로, 브라우저 간 호환성과 성능 최적화를 위해 사용됩니다.

 

주요 특징

• 브라우저 간 이벤트 일관성 보장
• 이벤트 위임으로 성능 최적화
• 핸들링 후 이벤트 객체 초기화

주의할 점

• 초기화된 이벤트 객체를 비동기 작업에서 참조하지 않도록 주의하세요.
• event.persist()로 초기화를 방지할 수도 있어요.

실무 팁

• SyntheticEvent에서 필요한 데이터는 핸들러 내부에서 미리 복사해두세요!

 

🌷전설의 개발자가 되어봅시당! 🌷