React Event Handling

React Event Handling은 React에서 사용자 인터페이스와 상호작용하는 이벤트를 처리하는 방법을 의미합니다. React에서는 브라우저의 DOM 이벤트와 유사한 방식으로 이벤트를 처리하지만, 몇 가지 중요한 차이점과 특징이 있습니다.

주요 특징

1. CamelCase 이벤트 이름:
   • React에서는 DOM 이벤트 이름과 달리 CamelCase로 이벤트 프로퍼티를 작성합니다.
   • 예: onclick 대신 onClick, onmouseover 대신 onMouseOver
2. 함수로 이벤트 핸들러 전달:
   • 이벤트 핸들러로 함수를 전달하며, 문자열로 전달하지 않습니다.
   • 예: <button onClick={handleClick}>Click Me</button>
3. SyntheticEvent:
   • React는 자체적으로 SyntheticEvent라는 래퍼 이벤트 시스템을 사용합니다.
   • 이는 브라우저 간의 호환성을 제공하고 이벤트의 동작을 일관성 있게 유지합니다.

기본 사용법

함수형 컴포넌트에서의 이벤트 핸들링

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default App;

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

import React, { Component } from 'react';

class App extends Component {
  handleClick() {
    alert('Button clicked!');
  }

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

export default App;

참고: 클래스형 컴포넌트에서는 this 바인딩이 필요합니다. 이를 위해 bind 메서드를 사용하거나, 화살표 함수를 사용하여 메서드를 정의할 수 있습니다.

이벤트 핸들러에 파라미터 전달하기

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

  return (
    <button onClick={() => handleClick('Hello, World!')}>Click Me</button>
  );
}

이벤트 객체 사용하기

이벤트 핸들러는 자동으로 SyntheticEvent 객체를 파라미터로 받습니다.

function App() {
  const handleClick = (event) => {
    console.log('Event type:', event.type);
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

디폴트 동작 방지하기

이벤트의 디폴트 동작을 방지하려면 event.preventDefault()를 사용합니다.

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Form submitted!');
  };

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

이벤트 전파 중단하기

이벤트 전파를 중단하려면 event.stopPropagation()을 사용합니다.

function ParentComponent() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  return (
    <div onClick={handleParentClick}>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const handleChildClick = (event) => {
    event.stopPropagation();
    console.log('Child clicked');
  };

  return (
    <button onClick={handleChildClick}>Click Me</button>
  );
}

위 예제에서 버튼을 클릭하면 'Child clicked'만 출력되고, 부모의 클릭 이벤트는 실행되지 않습니다.

여러 이벤트 유형 처리하기

React는 대부분의 DOM 이벤트를 지원하며, 이벤트 이름은 모두 CamelCase를 사용합니다.

• 마우스 이벤트: onClick, onDoubleClick, onMouseEnter, onMouseLeave 등
• 폼 이벤트: onChange, onSubmit, onFocus, onBlur 등
• 키보드 이벤트: onKeyDown, onKeyPress, onKeyUp 등

이벤트 핸들러 내에서 this 사용하기 (클래스형 컴포넌트)

클래스형 컴포넌트에서 이벤트 핸들러에서 this를 사용하려면 바인딩이 필요합니다.

1. 생성자에서 바인딩하기

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

  handleClick() {
    console.log('Button clicked', this);
  }

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

2. 화살표 함수 사용하기

class App extends Component {
  handleClick = () => {
    console.log('Button clicked', this);
  };

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

이벤트 핸들러에 추가 파라미터 전달하기 (클래스형 컴포넌트)

class App extends Component {
  handleClick(id, event) {
    console.log('ID:', id);
    console.log('Event type:', event.type);
  }

  render() {
    return (
      <button onClick={(event) => this.handleClick(1, event)}>Click Me</button>
    );
  }
}

SyntheticEvent의 특징

• SyntheticEvent는 이벤트 풀링(event pooling)을 사용하여 성능을 최적화합니다. 따라서 이벤트 핸들러에서 이벤트 객체를 비동기로 사용하려면 이벤트 객체를 persist()로 유지해야 합니다.

function App() {
  const handleClick = (event) => {
    event.persist(); // 이벤트 객체를 유지
    setTimeout(() => {
      console.log('Event type:', event.type);
    }, 1000);
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

이벤트 핸들링의 차이점 (HTML vs React)

	HTML	React
이벤트 이름	소문자 (e.g., onclick)	CamelCase (e.g., onClick)
이벤트 핸들러 전달	문자열로 이벤트 핸들러 지정 (e.g., onclick="handleClick()")	함수로 이벤트 핸들러 전달 (e.g., onClick={handleClick})
이벤트 객체	브라우저의 기본 이벤트 객체	SyntheticEvent 객체

예제: 입력 폼 이벤트 처리

import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Input:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

요약

• React의 이벤트 핸들링은 DOM 이벤트와 유사하지만, CamelCase 이벤트 이름과 함수로 이벤트 핸들러를 전달하는 점이 다릅니다.
• 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 이벤트를 처리할 수 있으며, 각 방식에 따라 this 바인딩에 주의해야 합니다.
• SyntheticEvent를 통해 브라우저 간의 이벤트 호환성을 유지하며, 필요한 경우 event.persist()를 사용하여 이벤트 객체를 유지할 수 있습니다.
• 다양한 이벤트와 그 사용법을 숙지하면 React에서 사용자 상호작용을 효과적으로 처리할 수 있습니다.

---

참고 자료:

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