하얀 코딩

[React - 8] 합성 이벤트(Synthetic Event) 본문

React

[React - 8] 합성 이벤트(Synthetic Event)

whitecoding 2023. 8. 23. 19:51

SyntheticEvent는 React에서 이벤트 처리를 추상화하기 위한 객체입니다. 

React 컴포넌트의 이벤트 핸들러 함수에 전달되며, DOM 이벤트와 유사한 인터페이스를 제공하지만,

크로스 브라우징 및 성능 최적화를 위해 React 내부에서 핸들링됩니다.

일반적인 DOM 이벤트와 달리 SyntheticEvent는 브라우저별로 동작하는 이벤트의 차이를 추상화하고, 

이벤트 풀링(event pooling) 메커니즘을 통해 메모리 사용량을 최소화합니다. 

이는 React 애플리케이션의 성능을 향상시키는 데 도움을 줍니다.

React 컴포넌트에서 이벤트 핸들러를 정의할 때, 일반적으로 첫 번째 매개변수로 SyntheticEvent 객체를 받습니다. 

이 객체는 해당 이벤트에 대한 정보를 포함하며, 이벤트 타입에 따라 다양한 속성과 메서드를 사용할 수 있습니다.

 

요약

이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 

이벤트 래퍼 SyntheticEvent 객체를 전달받습니다.

 

공식문서

https://ko.legacy.reactjs.org/docs/events.html

 

합성 이벤트(SyntheticEvent) – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

 

'React' 카테고리의 다른 글

[React - 10] useParams  (0) 2023.08.23
[React - 9] useNavigate  (0) 2023.08.23
[React - 7] useRef  (0) 2023.01.03
[React - 6] useState  (0) 2023.01.02
[React - 5] 조건부 렌더링  (0) 2023.01.02