React 앱을 개발하면서 사용자의 상호작용에 반응하는 기능을 구현해야 할 때가 있습니다. JSX에서 이벤트를 핸들링하는 방법을 알아보도록 하겠습니다.

이벤트 핸들링하기

JSX에서 이벤트를 처리하기 위해서는 이벤트 핸들러를 정의하고 해당 이벤트 핸들러를 JSX 요소에 연결해야 합니다.

예를 들어, 버튼을 클릭할 때마다 “Hello, World!”를 출력하는 코드를 작성해보겠습니다.

import React from 'react';

class App extends React.Component {
  handleClick() {
    alert('Hello, World!');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

export default App;

위의 코드에서는 handleClick() 메서드를 정의하고, 이를 버튼의 onClick 이벤트와 연결하여 클릭할 때 “Hello, World!”를 알림창으로 띄우도록 설정했습니다.

이벤트 객체 다루기

이벤트 핸들러를 정의할 때, 해당 이벤트 핸들러는 기본적으로 이벤트 객체를 매개변수로 받습니다. 이벤트 객체를 이용하여 발생한 이벤트에 대한 정보를 얻을 수 있습니다.

class App extends React.Component {
  handleClick(e) {
    console.log(e.target);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

위의 예제에서는 handleClick() 메서드가 e라는 이벤트 객체를 매개변수로 받아와서, 해당 이벤트가 발생한 요소에 대한 정보를 콘솔에 출력하고 있습니다.

preventDefault() 호출하기

때로는 특정 이벤트의 기본 동작을 막아야 하는 경우가 있습니다. 예를 들어, 링크를 클릭했을 때 새로고침을 막고 싶을 때는 preventDefault() 메서드를 호출할 수 있습니다.

class App extends React.Component {
  handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  render() {
    return (
      <a href="#" onClick={this.handleClick}>Click me</a>
    );
  }
}

위의 예제에서는 링크를 클릭했을 때 새로고침이 발생하는 기본 동작을 막기 위해 preventDefault() 메서드를 호출하고 있습니다.

결론

JSX를 사용하여 React 앱을 개발할 때, 이벤트 핸들링은 매우 중요한 부분입니다. 이를 통해 사용자와의 상호작용에 반응하고, 원하는 기능을 구현할 수 있습니다.

참고자료:

• React 공식 문서 - 이벤트 처리하기