[SeSAC] React 학습 정리(3) / 이벤트-합성이벤트

 

1. Event 기입

 

 - 이벤트는 소문자가 아닌 카멜 케이스(camelCase)를 사용 (ex. onclick ➡ onClick)

 - JSX를사용해 이벤트 핸들러 전달시 () 사용 X

 

 

2. Synthetic Event ( 합성 이벤트 [객체] )

일부 브라우저 간에 엔진 및 버전의 차이로인해 이벤트 객체의 구조와 속성이 다를 수 있다.

리액트는 이러한 브라우저간의 차이점을 통합해서 사용하고자 이벤트 객체를 감싼 합성 이벤트 객체 개념을 사용한다. (브라우저 마다 코드를 다르게 써야하면 곤란하니까)

이때 브라우저의 이벤트 객체를 '네이티브 이벤트 객체' 라 하며 이것을 감싼 객체를 '합성 이벤트 객체' 라 한다.

 

즉, 합성 이벤트 객체는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체 이다.

➡ 이벤트 핸들러 내에서 합성 이벤트 객체를 사용하면 각종 정보를 얻을 수 있다.

 

아래 코드에서)

* 이벤트 핸들러 : syntheticEvent()

* 합성 이벤트 객체 : e

* 네이티브 이밴트 객체 : e.nativeEvent

export default function SyntheticEvent() {
  function syntheticEvent(e) {
    // e는 합성이벤트 이며 네이티브 이벤트를 감싼 객체이다.
    // 네이티브 이벤트는 브라우저 마다 이벤트 이름/종류/처리방식이 다를 수도 있기 때문에
    // 리액트에서는 이를 처리하기 위해 네이티브 이벤트를 합성이벤트로 한번 감싼 형태로 사용한다.
    console.log('SyntheticEvent 버튼 클릭');
    console.log(e);
    console.log(e.target); // React의 가상 DOM 내에서 이벤트가 발생한 요소
    console.log(e.nativeEvent.target); // 실제 DOM 내에서 이벤트가 발생한 요소
  }

  function printInputValue(e) {
    console.log(e.target.value); // 인풋태그에 사용자가 입력한 값
  }

  return (
    <div>
      <p>SyntheticEvent 콘솔에 찍기</p>
      <br />
      <button onClick={syntheticEvent}>e 를 콘솔에 찍어보자</button>
      <button onClick={(e) => {console.log(e)}}>e 를 콘솔에 찍어보자2</button>
      <br />
      <input type="text" placeholder="합성이벤트를 확인해보자" onChange={printInputValue} />
    </div>
  );
}

 

합성 이벤트 객체에는 무슨 정보가 있는지 확인하기 위해 e를 콘솔 로그로 찍어봄

 - 합성 이벤트 자체에도 여러 정보와 함께 navtiveEvent 객체도 포함된 것을 확인 할 수 있다.

 - 1. 합성 이벤트 객체의 target 속성 : 가상 DOM 내에서 이벤트가 발생한 요소

 - 2. 네이티브 이벤트 객체의 target 속성 : 실제 DOM 내에서 이벤트가 발생한 요소

 

합성 이벤트 객체

 

 

 

3. e.target vs e.currentTarget

 - e.target 은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치
 - e.currentTarget 은 부모 포함

 

 

 

 

 

 

 

 

 

합성 이벤트 doc. https://ko.legacy.reactjs.org/docs/events.html