🐥 Synthetic Base Event?
➡️ React에서 이벤트 처리를 추상화하기 위한 객체이다.
➡️ native event를 감싸는 wrapper 객체
React에서 아래 코드를 실행 후 버튼을 누르면 콘솔에는 SyntheticBaseEvent 객체가 출력된다.
import "./App.css";
function App() {
function handleClick(e) {
console.log(e);
}
return <button onClick={(e) => handleClick(e)}>버튼</button>;
}
export default App;
React의 이벤트 핸들러(onClick, onChange 등)에 전달되는 이벤트 객체는 일반 DOM 이벤트가 아니라 Synthetic Event 객체이다.
브라우저마다 이벤트 동작 방식이 다르기 때문에, 이를 위해 React는 자체적인 이벤트 시스템을 제공하는 것이다.
🤔 동작 방식이 어떻게 다른데??
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="button">버튼</button>
<script>
const button = document.querySelector("#button");
button.addEventListener("click", (e) => {
console.log(e);
});
</script>
</body>
</html>
위 코드를 Chrome 과 Safari 에서 실행한 뒤, 버튼을 누르면?
❗서로 다른 이벤트 객체가 출력된다.
▶️ Chrome에서 실행 시 : PointerEvent
▶️ Safari에서 실행 시 : MouseEvent
💡 이렇게 브라우저마다 규격도 다르고 동작 방식도 달라서 발생하는 문제를 Cross Browsing Issue 라고 부른다.
이러한 Cross Browsing Issue를 해결하기 위해 React는 합성 이벤트 객체를 사용하는 것이다.
합성 이벤트 객체는 여러 브라우저들의 규격을 참고해서 하나의 통일된 규격으로 이벤트 규칙을 포매팅 해준다.
⇒ 개발자는 브라우저별로 이벤트가 다른 건 신경 쓸 필요 없이 합성 이벤트 객체만 잘 사용하면 된다! 👍👍
⚠️ 합성 이벤트 속성 말고 원래 이벤트에 있는 속성을 쓰고 싶다면?
간혹 합성 이벤트가 제공하는 속성 말고 원래 이벤트(native event)에 있는 속성을 사용해야 하는 경우가 있다.
그런데 이 합성 이벤트는 브라우저의 native event와 다르고 모든 속성이 직접적으로 mapping되어 있지 않다.
이런 경우를 대비하여 합성 이벤트는 nativeEvent라는 속성을 지닌다.
아래처럼, SyntheticBaseEvent는 여러 속성을 지니는데, 그 중 nativeEvent에 원래 이벤트인 PointerEvent가 저장되어 있는 걸 알 수 있다. (Chrome 환경)
💡 따라서, 원래 이벤트의 속성을 사용하고 싶다면, e.nativeEvent.속성 으로 원래 속성에 접근할 수 있다.
