📑 [React] 이벤트 핸들링

 

 

 

오늘은 리액트(React)에서 이벤트 핸들링(event handling)에 대해 알아보겠습니다.

이벤트 핸들링은 사용자가 웹 애플리케이션과 상호작용하는 중요한 방식입니다.

리액트에서는 이벤트를 다루는 방식이 HTML과 약간 다르기 때문에 이를 이해하고 올바르게 사용하는 것이 중요합니다.

이 글에서는 리액트에서 이벤트 핸들링을 어떻게 하는지, 예제와 함께 살펴보겠습니다.

 

---

 

리액트에서의 이벤트 핸들링

 

 

리액트의 이벤트 핸들링은 HTML의 이벤트 핸들링과 유사하지만, 몇 가지 중요한 차이점이 있습니다

 

 

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

 

이벤트 핸들러 사용 방법

 

리액트에서 이벤트 핸들러를 사용하는 기본적인 방법은 다음과 같습니다.

버튼을 클릭하면 메시지를 표시하는 간단한 예제를 통해 살펴보겠습니다.

 

import React from 'react';

function App() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

 

 

위 코드에서는 onClink을 통해 클릭 이벤트를 발생하였을 때,

중괄호를 통해 이러한 화살표 함수를 실행하라 라고 설정할 수 있다.

 

이벤트가 발생했을 때, 실행될 수 있도록 설정된 이러한 화살표 함수를

이벤트 클릭과 같은 이벤트를 실질적으로 처리하는 함수다. 라고 해서

이벤트 핸들러라고 부릅니다.

 

 

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

 

이벤트 핸들러에 인자를 전달해야 하는 경우, 화살표 함수나 bind를 사용할 수 있습니다.

 

import React from 'react';

function App() {
  function handleClick(name) {
    alert(`${name}님, 버튼이 클릭되었습니다!`);
  }

  return (
    <div>
      <button onClick={() => handleClick('홍길동')}>클릭하세요</button>
    </div>
  );
}

export default App;

 

 

클래스 컴포넌트에서의 이벤트 핸들링

 

클래스 컴포넌트에서도 비슷한 방식으로 이벤트 핸들링을 할 수 있습니다.

하지만 클래스 메서드를 이벤트 핸들러로 사용할 때는 this 바인딩에 주의해야 합니다.

 

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>클릭하세요</button>
      </div>
    );
  }
}

export default App;

 

 

화살표 함수를 사용한 클래스 메서드 바인딩

 

클래스 필드 문법을 사용하면 this 바인딩 문제를 간단하게 해결할 수 있습니다.

 

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>클릭하세요</button>
      </div>
    );
  }
}

export default App;

 

 

SyntheticEvent

 

리액트의 이벤트 객체는 SyntheticEvent라는 래퍼 객체입니다.

이는 브라우저 간의 호환성을 위해 리액트에서 제공하는 크로스 브라우징 래퍼 객체입니다.

SyntheticEvent는 브라우저의 네이티브 이벤트와 동일한 인터페이스를 가지며,

이벤트가 끝난 후에는 성능을 위해 이벤트 객체가 재사용됩니다.

 

 

import React from 'react';

function App() {
  function handleClick(event) {
    console.log(event.type); // "click"
  }

  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

 

---

이벤트 핸들링 주의 사항

 

이벤트 핸들러 내부에서 this 사용

클래스 컴포넌트에서 이벤트 핸들러를 정의할 때는 this 바인딩에 주의해야 합니다.

bind 메서드를 사용하거나 클래스 필드 문법을 사용하여 올바른 this를 바인딩해야 합니다.

 

 

이벤트 객체의 재사용

 

SyntheticEvent 객체는 이벤트 핸들러가 호출된 후 재사용되기 때문에,

비동기 코드에서 이벤트 객체를 사용할 경우 이벤트 객체의 속성을 별도로 저장해야 합니다.

 

import React from 'react';

function App() {
  function handleClick(event) {
    event.persist(); // SyntheticEvent 객체의 재사용을 막음
    setTimeout(() => {
      console.log(event.type); // "click"
    }, 1000);
  }

  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

export default App;

 

 

리액트에서는 함수에 매개변수로 이벤트 객체라는 것을 제공한다.

 

const onClickButton = (e) => {
    console.log(e);
    console.log(text);
};

 

위 코드에서  onClinkButton 함수에도 이벤트 객체가 제공되기 때문에,

e 라는 매개변수를 선언하고 이 매개변수를 콘솔에 출력하도록 설정하면

 

 

위와 같은 SyntheticBaseEvent 라는 객체가 출력됩니다.

이 SyntheticBaseEvent라는 객체가 매개변수 e에 저장된 이벤트 객체입니다.

 

SyntheticBaseEvent 는 합성 이벤트 객체라는 뜻으로 모든 브라우저의 이벤트 객체를 하나의 포맷으로 통일한 형태이다.

 

웹 브라우저들마다 동작들이 조금씩 다르기 때문에 Can I Use라는 사이트를 통해서

자바스크립트나 CSS의 기능이 어떠한 브라우저에서 어떻게 동작하고 지원하는지 확인할 수 있습니다.

 

그래서 이렇게 브라우저마다 규격도 다르고 동작 방식도 달라서 생겨버리는 이러한 문제를

Cross Browsing Issue 라고 부르며, 이것을 아주 편리하게 해결해주는 것이

바로 React의 이 합성 이벤트 객체입니다.

 

이 합성 이벤트 객체는 여러 브라우저들의 규격을 참고해서 하나의 통일된 규격으로 이벤트 객체를 포매팅 해준다.

일종의 통합 규격을 만들어 놓은 것입니다. 

 

따라서 React 에서는 브라우저가 서로 달라서 발생하는 문제인 크로스 브라우징 이슈에서도 비교적 자유롭습니다.

 

---

 

결론

 

 

리액트에서의 이벤트 핸들링은 HTML과 비슷하지만 몇 가지 중요한 차이점이 있습니다.

이벤트 이름을 캐멀 케이스로 작성하고, 이벤트 핸들러를 함수로 전달하는 것이 그 예입니다.

 

또한, 클래스 컴포넌트에서는 this 바인딩에 주의해야 하며,

SyntheticEvent 객체의 재사용성에 대해서도 알아두어야 합니다.

 

이 글을 통해 리액트의 이벤트 핸들링에 대해 이해하고,

이를 활용하여 더 나은 사용자 인터페이스를 구현하시길 바랍니다.