React에서 이벤트 처리는 어떤 원리로 구현되는건가요?

Question

React에서 이벤트 처리는 어떤 원리로 구현되는건가요?

조회수 615회

react

1

싫어요

React Component에서 이벤트를 처리할 __Handle 메소드를 만들면 parameter로 이벤트를 넘긴 후에 그 parameter의 값을 가져와서 처리하는걸로 알고 있습니다.

handleEvent = (e) => {
    this.setState({
        state1 = e.target.value
    })
}

대략 위와 같은 모양으로요.

근데 저기서 e에 해당하는 객체?가 어떤 구조로 생성이 되는건지 궁금합니다. 예를 들면 클릭을 했을 때 클릭이라는 이벤트가 어떤 길을 거쳐서 어떤 데이터를 만든 객체가 되고 그것의 값이 메소드로 넘어가게 되는지, 그 구조를 알고싶어서요.

syntheticEvent같이 이벤트 처리할 때 상속받는 인터페이스들도 확인해봤는데 구현부분이 없는건지 제가 이해를 못하는건지... 너무 어렵네요 ㅠㅠ

어느 부분을 찾아보면 될거같다 정도의 조언만이라도 주신다면 감사하겠습니다

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 1 · Accepted Answer

SyntheticEvent 레퍼런스 가이드에 따르면:

여러분이 코딩해서 만든 이벤트 핸들러는 SyntheticEvent라는 인스턴스에게 전달되게 되는데, 이 인스턴스는 브라우저 자체 이벤트의 크로스 브라우징 처리를 한 래퍼 인스턴스입니다.

요컨대 SyntheticEvent라는 건 크로스 브라우징 문제만 해결했을 뿐 궁극적으로는 그냥 기존 JS-브라우저 이벤트 객체일 뿐이라는 겁니다. 따라서 원하시는 답을 얻으려면 자바스크립트 이벤트 그 자체를 더 찾아보셔야 할 것 같아요. MDN의 JS 이벤트 소개로 시작하세요.

가끔 이벤트 핸들링 함수를 보면 무슨 event니 evt니 아니면 그냥 e라고 지정된 변수를 보실 수 있을 겁니다. 이건 이벤트 객체라는 건데, 이벤트 핸들러에게 자동으로 넘겨지는 것이며 추가 기능 및 정보를 제공합니다.