React에서 이벤트 처리하기

React에서 사용자 입력을 처리하는 방법은 웹 개발을 처음 접하는 사람에게는 생소할 수 있습니다. 그러나 기본적인 개념과 방법을 이해하면, 이벤트를 효과적으로 다루고 동적인 UI를 만들 수 있습니다. 이번 글에서는 React에서 이벤트를 처리하는 방법을 초보자도 쉽게 이해할 수 있도록 자세히 설명하겠습니다.

1. 이벤트란?

이벤트(Event)는 사용자가 웹 페이지에서 특정 동작을 수행할 때 발생하는 일종의 신호입니다. 예를 들어, 버튼을 클릭하거나 키보드를 입력하는 등의 행위가 이벤트에 해당합니다.

HTML에서는 onclick, onchange, onmouseover 등의 속성을 통해 이벤트를 처리할 수 있지만, React에서는 JSX 문법을 활용하여 이벤트를 다룹니다.

2. React에서 이벤트 처리하는 방법

React에서는 이벤트 핸들러를 JSX 속성으로 전달하여 이벤트를 처리할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 특정 동작을 수행하려면 다음과 같이 작성합니다.

기본적인 이벤트 처리

import React from 'react';

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

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

export default MyButton;

위 코드에서 onClick 속성에 handleClick이라는 함수를 전달하여 버튼을 클릭했을 때 경고창이 뜨도록 만들었습니다.

3. 이벤트 핸들러 함수 분리하기

이벤트 핸들러를 컴포넌트 내부에 정의할 수도 있지만, 가독성을 높이기 위해 함수로 분리하는 것이 일반적입니다.

function MyButton() {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

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

위 코드처럼 handleClick 함수를 컴포넌트 내부에서 정의하면 유지보수가 용이해집니다.

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

이벤트 핸들러가 특정 값을 받아서 처리해야 하는 경우도 많습니다. 이를 위해 함수 안에서 다른 함수를 반환하는 방식으로 처리할 수 있습니다.

function MyButton({ message }) {
  const handleClick = (msg) => () => {
    alert(msg);
  };

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

export default function App() {
  return <MyButton message="안녕하세요!" />;
}

위 코드에서는 handleClick이 msg를 인자로 받아 내부에서 함수를 반환하는 구조를 사용하여, 원하는 값을 이벤트 핸들러에 전달할 수 있도록 했습니다.

5. SyntheticEvent 이해하기

React에서는 브라우저의 기본 이벤트 객체를 감싸는 SyntheticEvent를 사용합니다. 이는 이벤트의 동작을 표준화하여 크로스 브라우징 이슈를 해결하는 역할을 합니다.

function MyButton() {
  const handleClick = (event) => {
    console.log(event.target);
  };

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

위 코드에서 event.target은 사용자가 클릭한 요소(이 경우 <button> 태그)를 가리킵니다.

6. 기본 이벤트 방지하기

기본적으로 폼 제출 이벤트는 페이지를 새로고침합니다. 이를 막기 위해 preventDefault를 사용합니다.

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

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

위 코드에서는 event.preventDefault()를 호출하여 폼 제출 시 새로고침이 발생하지 않도록 설정했습니다.

7. 여러 이벤트 처리하기

React에서는 한 요소에서 여러 개의 이벤트 핸들러를 사용할 수도 있습니다.

function MyComponent() {
  const handleMouseOver = () => {
    console.log('마우스를 올렸습니다!');
  };

  const handleClick = () => {
    console.log('버튼을 클릭했습니다!');
  };

  return (
    <button onMouseOver={handleMouseOver} onClick={handleClick}>
      여러 이벤트 처리하기
    </button>
  );
}

위 코드에서는 onMouseOver와 onClick을 동시에 설정하여, 사용자가 마우스를 올리거나 클릭했을 때 각각 다른 이벤트가 실행되도록 했습니다.

8. 클래스형 컴포넌트에서 이벤트 처리

React의 함수형 컴포넌트가 대세이지만, 클래스형 컴포넌트를 사용하는 경우도 있습니다. 클래스형 컴포넌트에서 이벤트 핸들러를 사용할 때는 this 바인딩이 필요합니다.

import React, { Component } from 'react';

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

  handleClick() {
    alert('클래스 컴포넌트에서 버튼이 클릭됨');
  }

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

export default MyButton;

클래스형 컴포넌트에서는 this를 바인딩하지 않으면 handleClick이 undefined가 되어 오류가 발생할 수 있습니다.

9. 정리

• React에서 이벤트는 JSX 문법을 활용하여 처리합니다.
• 이벤트 핸들러는 함수로 정의하고 onClick 등의 속성을 통해 적용합니다.
• preventDefault()를 사용하여 기본 동작을 방지할 수 있습니다.
• 여러 이벤트 핸들러를 한 요소에 적용할 수 있습니다.
• 클래스형 컴포넌트에서는 this 바인딩이 필요할 수 있습니다.

읽어주셔서 감사합니다 ! 오늘도 열코 빡코!!