React에서의 이벤트 처리 방법

React에서 이벤트 처리는 일반적인 HTML과 유사하지만, 몇 가지 차이점이 있습니다. 아래는 React에서 이벤트를 다루는 방법에 대한 주요 내용입니다:

1. 이벤트 핸들러 등록:

React에서 이벤트 핸들러를 등록할 때는 콜백 함수를 사용합니다. 함수는 이벤트가 발생했을 때 호출됩니다.

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

import React from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button Clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

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

import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    console.log('Button Clicked!');
  };

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

export default MyComponent;

2. 이벤트 객체 사용:

이벤트 핸들러에 전달되는 이벤트 객체는 브라우저의 원래 이벤트 객체와 다릅니다. React는 브라우저의 이벤트를 감싼 합성 이벤트 객체를 제공합니다.

import React from 'react';

const MyComponent = () => {
  const handleClick = (event) => {
    console.log('Button Clicked!', event);
  };

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

3. 이벤트 핸들러에서 인수 전달:

이벤트 핸들러에 인수를 전달하려면, 화살표 함수나 bind를 사용할 수 있습니다.

import React from 'react';

const MyComponent = () => {
  const handleItemClick = (itemName) => {
    console.log(`${itemName} clicked!`);
  };

  return (
    <ul>
      <li onClick={() => handleItemClick('Item 1')}>Item 1</li>
      <li onClick={handleItemClick.bind(null, 'Item 2')}>Item 2</li>
    </ul>
  );
};

export default MyComponent;

4. 이벤트 전파 막기:

React에서는 이벤트의 전파를 막기 위해 stopPropagation을 사용할 수 있습니다.

import React from 'react';

const MyComponent = () => {
  const handleButtonClick = (event) => {
    event.stopPropagation();
    console.log('Button Clicked!');
  };

  const handleContainerClick = () => {
    console.log('Container Clicked!');
  };

  return (
    <div onClick={handleContainerClick}>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
};

export default MyComponent;

React에서는 이벤트 처리가 일관되게 이루어지며, 이러한 방식은 React의 가상 DOM과 효과적으로 통합되어 있습니다.