React에서 이벤트 핸들러 사용하기

 

React는 사용자와의 상호작용을 처리하기 위해 이벤트 핸들링 시스템을 제공합니다. HTML의 이벤트 핸들링 방식과 유사하지만, React만의 독특한 특징과 문법이 있습니다. 이번 글에서는 React에서 이벤트 핸들러를 사용하는 방법과 주요 특징, 그리고 실습 예제를 통해 정확히 이해해 보겠습니다.

1. React 이벤트 핸들러의 특징

1-1. CamelCase를 사용한 이벤트 이름

React에서는 이벤트 이름을 onClick, onChange와 같이 CamelCase로 작성해야 합니다. 이는 HTML의 소문자 이벤트 이름(onclick, onchange)과 다릅니다.

1-2. JSX를 통해 이벤트 핸들러 연결

React에서는 JSX 구문을 사용하여 이벤트 핸들러를 연결합니다. JSX에서 이벤트 핸들러는 함수의 참조를 전달합니다. 문자열로 핸들러를 전달하는 HTML 방식과는 다릅니다.

1-3. SyntheticEvent 객체

React의 이벤트는 브라우저의 기본 이벤트가 아니라 SyntheticEvent라는 객체입니다. 이는 브라우저 간의 호환성을 보장하고 React에서 이벤트를 효율적으로 관리할 수 있게 합니다.

2. 이벤트 핸들러 작성 방법

2-1. 기본적인 이벤트 핸들러

이벤트 핸들러는 보통 컴포넌트 내에서 메서드나 함수 형태로 작성됩니다. 예제를 통해 확인해 보겠습니다.

import React from 'react';

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

  return (
    <button onClick={handleClick}>클릭</button>
  );
}

export default App;

2-2. 클래스 컴포넌트에서의 이벤트 핸들러

클래스 컴포넌트에서는 이벤트 핸들러를 메서드로 정의하며, this 바인딩이 필요할 수 있습니다.

import React, { Component } from 'react';

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

  handleClick() {
    alert('클래스 컴포넌트 버튼 클릭!');
  }

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

export default App;

this.handleClick.bind(this) 없이 사용하려면 클래스 필드 문법을 사용할 수도 있습니다.

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    alert('클래스 필드 문법을 사용한 버튼 클릭!');
  };

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

export default App;

2-3. 이벤트 핸들러에 매개변수 전달하기

이벤트 핸들러에 매개변수를 전달해야 할 때는 화살표 함수 또는 bind를 사용할 수 있습니다.

function App() {
  const handleClick = (name) => {
    alert(`${name}님이 클릭했습니다!`);
  };

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

export default App;

3. SyntheticEvent와 기본 이벤트 처리

React의 SyntheticEvent는 브라우저 이벤트의 래퍼(wrapper)로, 이벤트가 브라우저 간 일관성을 유지하도록 돕습니다. 주요 특징은 다음과 같습니다:

• SyntheticEvent는 이벤트 핸들러가 호출된 후 자동으로 제거됩니다.
• 이벤트의 기본 동작을 방지하려면 event.preventDefault()를 호출합니다.

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('폼이 제출되었습니다!');
  };

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

export default App;

4. 이벤트 핸들링 주의사항

1. 핸들러 내부에서 상태 변경: 상태 업데이트는 비동기로 처리되므로, 변경된 상태값을 즉시 참조하려 할 때 주의해야 합니다.
2. 화살표 함수 남용: 성능 문제를 방지하기 위해 렌더링 시마다 새로운 화살표 함수를 생성하는 것을 피하는 것이 좋습니다.
3. Custom 이벤트: React는 브라우저의 기본 이벤트만 지원하며, 커스텀 이벤트는 직접 구현해야 합니다.

5. 정리

React에서 이벤트 핸들러를 사용하는 방법과 특징을 알아보았습니다. React는 JSX와 SyntheticEvent를 활용해 효율적이고 일관성 있는 이벤트 핸들링을 제공합니다. 다양한 예제를 통해 익히고, 프로젝트에 적절히 활용해 보세요!