본문 바로가기

프로그래밍/React

리액트(React) - 이벤트

리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다.

 

이번에는 리액트에서 이벤트를 사용하는 방법을 알아봅니다.

 

리액트에서 이벤트는 DOM요소에만 이벤트를 사용할 수 있습니다. 따라서 컴포넌트 안에 있는 요소에 이벤트를 추가해야 합니다.

 

코드와 같이 기존 HTML에서는 이벤트에서 함수를 호출하거나 간단한 코드를 적어 적용했습니다. 리액트에서 이벤트를 줄 때는 함수를 전달해주어야 합니다.

class Test extends Component {

  render() {
    return (
      <div>
        <button onClick={ () => {alert("클릭이에요!");} }>
          클릭
        </button>
      </div>
    );
  }
}

export default Test;

 

화살표 함수나 따로 함수를 선언하여 함수를 전달하면 됩니다.

 

화살표 함수가 아닌 함수로 전달한다면 주의할 점이 있습니다. 클래스 내에 메서드에는 this가 바인딩이 되어있지 않기 때문에 전달한 메서드에 this가 있다면 this를 찾지 못해 에러가 발생합니다. 

 

따라서 클래스 컴포넌트의 생성자에서 미리 전달할 메서드의 바인딩을 해주어야 합니다.

//app.js
function App() {
  return <Test name="컴포넌트"></Test>
}

//Test.js
class Test extends Component {
  constructor(props) {
    super(props);
    this.click = this.click.bind(this);
  }

  click() {
    alert(this.props.name + " 클릭이에요!");
  }

  render() {
    return (
      <div>
        <button onClick={ this.click }>
          클릭
        </button>
      </div>
    );
  }
}

export default Test;

constructor(생성자)에서 미리 바인딩된 프로퍼티를 만들어 두고 해당 프로퍼티를 이용해 이벤트에 전달됩니다.

이렇게 전달되면 this가 Test 클래스가 되어 this를 사용할 수 있습니다.

 

리액트는 이벤트에서 넘겨주는 이벤트 정보 객체가 SyntheticEvent객체로 넘어옵니다.

SyntheticEvent 객체는 리액트에서 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 해당 객체로 받습니다.

또한 기존 JS에서 이벤트 정보를 가져오는 Event 객체와 똑같습니다. 

 

다만 사용하는 브라우저의 고유 이벤트는 SyntheticEvent 객체에 nativeEvent를 사용하여 사용해야 합니다.

 

리액트(v17이하)에서 SyntheticEvnet객체는 재사용이 됩니다. 따라서 재사용이 되면서 기존에 객체 정보가 모두 사라지기 때문에 미리 필요한 이벤트 정보를 저장하여 사용해야 합니다. (v17 이후부터는 이벤트 풀링이 사라졌습니다.)

 

리액트가 넘겨주는 SyntheticEvent객체는 화살표 함수로 이벤트를 전달할 때에는 명시적으로 인수를 적어줘야 하지만

bind를 사용할 때에는 명시적으로 적어주지 않아도 자동으로 전달이 됩니다.

<button onClick={ (e) => { this.click() } }>
<button onClick={ this.click.bind(this) }>

함수형 컴포넌트에서도 이벤트를 똑같은 방식으로 사용하면 됩니다.

import React, { useState } from 'react';

const Test2 = (props) => {
    const [text, setText] = useState("클릭해주세요!");
    const click = () => setText(props.name + " 클릭이에요!");

    return (
        <div>
            <button onClick={click}>버튼1</button>
            <h1>{text}</h1>
        </div>
    )
}

export default Test2;

함수형 컴포넌트에서 사용할 메서드를 만들고  호출될 메서드를 전달해주는 건 똑같습니다.

 

 

참고

리액트를 다루는 기술(개정판) - 김민준 지음

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

 

이벤트 처리하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org