5 React 이벤트 핸들링 완벽 가이드: 이벤트 처리와 매개변수 전달하기

 React에서 이벤트 핸들링(Event Handling)은 사용자 입력을 처리하고 UI의 동작을 제어하는 중요한 개념입니다. 버튼 클릭, 입력 필드 값 변경, 마우스 이벤트 등 다양한 이벤트를 다룰 수 있으며, 이벤트 핸들러를 통해 원하는 기능을 구현할 수 있습니다.

이번 글에서는 React에서 이벤트를 처리하는 방법과 이벤트 핸들러에 매개변수를 전달하는 방법을 초보자도 쉽게 이해할 수 있도록 설명드리겠습니다.

---

1. React에서 이벤트 처리 방법

React에서 이벤트를 처리하는 방식은 일반 HTML과 약간 다릅니다. 기본적인 차이점은 다음과 같습니다.

1. 이벤트 이름이 camelCase 형태로 작성됩니다.
   • 예: onclick → onClick, onchange → onChange
2. 이벤트 핸들러는 함수 형태의 값을 받아야 합니다.
   • HTML에서는 문자열로 이벤트를 지정하지만, React에서는 함수로 전달해야 합니다.

예제: 버튼 클릭 이벤트 처리

import React from 'react';

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

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

export default ButtonClick;

설명:

• onClick={handleClick}처럼 이벤트 핸들러를 함수로 전달해야 합니다.
• handleClick 함수는 버튼이 클릭될 때 실행되며, alert을 띄우는 역할을 합니다.

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

이벤트 핸들러에서 특정 값을 전달하려면 두 가지 방법이 있습니다.

2-1. 화살표 함수로 이벤트 핸들러에 매개변수 전달

function ButtonClick() {
  const handleClick = (name) => {
    alert(`${name}님, 버튼을 클릭하셨습니다!`);
  };

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

설명:

• onClick={() => handleClick('사용자')}처럼 화살표 함수를 사용하여 이벤트 핸들러를 호출할 수 있습니다.
• 이렇게 하면 handleClick 함수가 즉시 실행되지 않고, 버튼 클릭 시 실행됩니다.

2-2. bind를 사용하여 매개변수 전달

bind를 활용하면 기존 함수에 특정 값을 미리 전달할 수 있습니다.

function ButtonClick() {
  const handleClick = (name) => {
    alert(`${name}님, 버튼을 클릭하셨습니다!`);
  };

  return (
    <button onClick={handleClick.bind(null, '사용자')}>클릭하세요</button>
  );
}

설명:

• bind(null, '사용자')를 사용하면 handleClick 함수의 첫 번째 인자로 '사용자'가 전달됩니다.
• 그러나 최신 React 코드에서는 보통 화살표 함수 방식을 더 많이 사용합니다.

---

3. 이벤트 객체 활용하기

React의 이벤트 핸들러는 **SyntheticEvent(합성 이벤트)**를 매개변수로 받습니다.
이벤트 핸들러에서 이 객체를 활용하면 클릭한 요소의 정보나 키 입력 값을 가져올 수 있습니다.

3-1. 클릭 이벤트에서 이벤트 객체 활용

function ButtonClick() {
  const handleClick = (event) => {
    console.log(event.target); // 클릭된 요소
    alert(`클릭한 요소의 태그명: ${event.target.tagName}`);
  };

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

설명:

• event.target을 사용하면 클릭된 요소의 정보를 가져올 수 있습니다.
• 콘솔에 event.target을 출력하면 클릭된 <button> 요소가 나타납니다.

3-2. 입력 필드에서 이벤트 객체 활용

function InputField() {
  const handleChange = (event) => {
    console.log(event.target.value); // 입력된 값
  };

  return (
    <input type="text" onChange={handleChange} placeholder="이름을 입력하세요" />
  );
}

설명:

• onChange={handleChange}를 설정하면 사용자가 입력할 때마다 handleChange가 호출됩니다.
• event.target.value를 통해 입력된 값을 가져올 수 있습니다.

---

4. 여러 개의 이벤트 핸들러 적용하기

React에서는 여러 개의 이벤트 핸들러를 쉽게 적용할 수 있습니다.

예제: 버튼과 입력 필드에서 각각의 이벤트 처리

function Form() {
  const handleClick = () => {
    alert('버튼 클릭됨');
  };

  const handleInputChange = (event) => {
    console.log('입력값:', event.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleInputChange} placeholder="이름 입력" />
      <button onClick={handleClick}>제출</button>
    </div>
  );
}

설명:

• 버튼 클릭과 입력 필드 변경을 각각 다른 이벤트 핸들러에서 처리할 수 있습니다.

---

5. 기본 동작 막기와 이벤트 전파 중지

HTML의 기본 동작을 막거나 이벤트 전파를 중지하려면 event.preventDefault() 또는 event.stopPropagation()을 사용해야 합니다.

5-1. preventDefault() 사용 예제

function LinkComponent() {
  const handleClick = (event) => {
    event.preventDefault(); // 기본 동작 차단
    alert('링크 클릭 이벤트가 차단되었습니다.');
  };

  return (
    <a href="https://www.google.com" onClick={handleClick}>구글 이동</a>
  );
}

설명:

• event.preventDefault()를 사용하면 <a> 태그의 기본 이동 동작이 막힙니다.

5-2. stopPropagation() 사용 예제

function Parent() {
  const handleParentClick = () => {
    alert('부모 요소 클릭');
  };

  const handleChildClick = (event) => {
    event.stopPropagation(); // 이벤트 전파 중지
    alert('자식 요소 클릭');
  };

  return (
    <div onClick={handleParentClick} style={{ padding: '20px', background: '#ddd' }}>
      <button onClick={handleChildClick}>버튼 클릭</button>
    </div>
  );
}

설명:

• event.stopPropagation()을 사용하면 부모 요소로 이벤트가 전달되지 않습니다.
• 버튼을 클릭해도 부모 div의 onClick이 실행되지 않습니다.

---

6. 결론

React에서 이벤트 핸들링은 UI와 사용자 상호작용을 제어하는 중요한 개념입니다.
이번 글에서는 이벤트 처리 방법, 매개변수 전달, 이벤트 객체 활용, 기본 동작 차단 등을 배웠습니다.

React 이벤트 핸들링 정리:
    

React에서 이벤트를 잘 활용하면 더욱 동적인 웹 애플리케이션을 만들 수 있습니다. 직접 실습하면서 익혀보세요!