[React] 이벤트 핸들링 (사용자 상호작용 다루기)

리액트에서 이벤트 핸들링은 사용자 상호작용(버튼 클릭, 입력 필드 변경 등)에 반응하여 애플리케이션의 동작을 제어하는 방법입니다.

리액트에서는 HTML에서 사용하는 이벤트와 비슷하게 작동하지만, Synthetic Event 시스템을 사용하여 이벤트를 처리합니다.

이 시스템은 브라우저 간의 차이를 추상화하고, 일관된 방식으로 이벤트를 다룰 수 있게 합니다.

 

1. 리액트 이벤트 시스템

리액트에서는 HTML에서 사용하는 이벤트 핸들러를 CamelCase로 작성합니다. 예를 들어, HTML에서 onclick으로 사용하던 이벤트는 리액트에서는 onClick으로 사용합니다.

• onClick: 버튼 클릭
• onChange: 입력 필드 변경
• onSubmit: 폼 제출
• onMouseEnter: 마우스가 요소 위에 올라갔을 때

---

2. 리액트에서 이벤트 핸들러 사용하기

리액트에서는 이벤트 핸들러를 직접 HTML 태그에 전달하여 처리합니다. 이때, 이벤트 핸들러는 함수 형태로 전달됩니다.

import React, { useState } from 'react';

function ClickCounter() {
  // 상태 관리
  const [count, setCount] = useState(0);

  // 클릭 이벤트 핸들러
  const handleClick = () => {
    setCount(count + 1); // 상태 업데이트
  };

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  );
}

export default ClickCounter;

 

• onClick={handleClick}: 버튼을 클릭할 때마다 handleClick 함수가 실행됩니다.
• handleClick 함수에서 상태를 업데이트하고, 그에 따라 UI가 리렌더링됩니다.

 

 

3. 이벤트 객체

리액트의 이벤트 핸들러는 기본적으로 SyntheticEvent 객체를 받습니다. 이 객체는 브라우저의 네이티브 이벤트를 감싸고 있으며, 네이티브 이벤트와 비슷한 프로퍼티와 메서드를 제공합니다. 예를 들어, event.target으로 클릭된 요소를 알 수 있습니다.

 

import React from 'react';

function HandleInputChange() {
  const handleChange = (event) => {
    console.log('Input value:', event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

export default HandleInputChange;

 

• onChange={handleChange}: 입력 필드에서 값이 변경될 때마다 handleChange 함수가 실행됩니다.
• event.target.value로 입력된 값에 접근할 수 있습니다.

4. 이벤트 핸들러에 인자 전달하기

리액트에서는 이벤트 핸들러에 인자를 전달하고 싶을 때, 화살표 함수나 함수 바인딩을 사용합니다.

import React, { useState } from 'react';

function ChangeText() {
  const [text, setText] = useState('Hello, World!');

  const handleClick = (newText) => {
    setText(newText);
  };

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => handleClick('Hello, React!')}>Change Text</button>
    </div>
  );
}

export default ChangeText;

 

 

• onClick={() => handleClick('Hello, React!')}: 클릭할 때마다 handleClick 함수에 'Hello, React!'라는 인자를 전달하여 상태를 업데이트합니다.

 

5. 이벤트 핸들링 (사용자 상호작용 다루기)

리액트에서 이벤트 핸들링은 사용자 상호작용(버튼 클릭, 입력 필드 변경 등)에 반응하여 애플리케이션의 동작을 제어하는 방법입니다. 리액트에서는 HTML에서 사용하는 이벤트와 비슷하게 작동하지만, Synthetic Event 시스템을 사용하여 이벤트를 처리합니다. 이 시스템은 브라우저 간의 차이를 추상화하고, 일관된 방식으로 이벤트를 다룰 수 있게 합니다.

 

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // `this` 바인딩
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click Me!</button>
      </div>
    );
  }
}

export default MyComponent;

• this.handleClick = this.handleClick.bind(this)를 사용해 메서드를 this에 바인딩해야, handleClick 메서드 내에서 this가 올바르게 컴포넌트를 참조할 수 있습니다.

6. 이벤트의 기본 동작 방지하기

리액트에서 이벤트 핸들러 내에서 event.preventDefault()를 호출하여 기본 동작을 방지할 수 있습니다. 예를 들어, 폼 제출 시 페이지 리로드를 막거나 링크 클릭 시 이동을 방지할 수 있습니다.

 

import React from 'react';

function MyForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 폼 제출 시 페이지 리로드 방지
    console.log('Form submitted');
  };

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

export default MyForm;

• event.preventDefault()를 호출하면 폼 제출 시 기본적으로 발생하는 페이지 리로드가 방지됩니다.