React : Event / SyntheticEvent

코일·2022년 1월 6일
0

learn-react

목록 보기
3/4
post-thumbnail

개요

이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받습니다


합성이벤트

https://ko.reactjs.org/docs/events.html#gatsby-focus-wrapper

지원하는 이벤트

React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다.

다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 Capture를 덧붙이세요. 예를 들어 onClick 대신 onClickCapture를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다.

  • 버블링 : 부모로 계속 전달해주는 것

  • 캡쳐링 : 부모가 내자식들에게 누가 클릭이 됬는가를 확인하는 캡쳐 과정

캡쳐링 한 후에, 버블링이 일어난다.

예제

import React from 'react';

export default function Event() {
  const handleButtonClick = () => {
    console.log('handleButtonClick');
  };

  const handleClickCapture = () => {
    console.log('handleClickCapture');
  };

  const handleClickCapture2 = () => {
    console.log('handleClickCapture2');
  };

  const handleClickBubble = () => {
    console.log('handleClickBubble');
  };

  return (
    <div onClickCapture={handleClickCapture}>
      <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
        <button onClick={handleButtonClick}>Button</button>
      </div>
    </div>
  );
}
결과:
    handleClickCapture
    handleClickCapture2
    handleButtonClick
    handleClickBubble

console.dir( ) 로 확인해보기 & onMouseLeave 확인 해보기

import React from 'react';

export default function Event() {
  const **handleButtonClick** = (e) => {
    **console.dir(e); //** handleButtonClick 의 이벤트 확인 가능
    console.log('handleButtonClick');
  };

  const **handleMouseLeaveClick** = (e) => {
    console.**dir**(e); // onMouseLeave 의 이벤트 확인 가능
    console.log('handleMouseLeaveClick');
  };

  const handleClickCapture = () => {
    console.log('handleClickCapture');
  };

  const handleClickCapture2 = () => {
    console.log('handleClickCapture2');
  };

  const handleClickBubble = () => {
    console.log('handleClickBubble');
  };

  return (
    <div onClickCapture={handleClickCapture}>
      <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
        <button
          onClick={handleButtonClick}
          onMouseLeave={handleMouseLeaveClick}
        >
          Button
        </button>
      </div>
    </div>
  );
}

결과 :

nativeEvent : { type : "mouseout" }
안에 있는 요소는 다를 수 있지만, 리액트가 관리 하고 있다는 것을 알 수 있음.


이벤트 처리하기

https://ko.reactjs.org/docs/handling-events.html

  • React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.
  • JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.

예를 들어, HTML은 다음과 같습니다.

<button onclick="activateLasers()">
  Activate Lasers
</button>

React에서는 약간 다릅니다.

<button onClick={activateLasers}>  
	Activate Lasers
</button>

또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다.

<form onsubmit="console.log('You clicked submit.'); return **false**">
<button type="submit">Submit</button></form>

React에서는 다음과 같이 작성할 수 있습니다.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
		console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>      
			<button type="submit">Submit</button>    
		</form>);
}

여기서 e는 합성 이벤트입니다. React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않습니다. 더 자세한 사항은 [합성 이벤트](https://ko.reactjs.org/docs/events.html)을 참고하시기 바랍니다.

...

이벤트 핸들러에 인자 전달하기

루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다. 예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동합니다.

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

위 두 줄은 동등하며 각각 화살표 함수와 [Function.prototype.bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)를 사용합니다.

두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달됩니다.


정리

이벤트

합성이벤트 → 인터페이스는 같지만 직접 대응되지 않음

매우 유사하다 ( 같지는 않음 )

Synthetic Event 라는 wrapper 로 구성 되어있다.

그 안에 nativeEvent 있으니까, 이벤트 종류 등 필요하면 꺼내 써라.

Bubble / Capture → Capture > target > Bubble

  • 버블링 : 부모로 계속 전달해주는 것

  • 캡쳐링 : 부모가 내자식들에게 누가 클릭이 됬는가를 확인하는 캡쳐 과정

* 캡쳐링 / 버블링 순서
handleClickCapture
handleClickCapture2
handleButtonClick
handleClickBubble

retrun false → e.preventDefault( ) 해줘야 함


profile
How do you get what you want?🤔🤔

0개의 댓글