[React다루는기술] 06. 이벤트 핸들링(Event Handling)

in React on React 다루는 기술


클래스 컴포넌트로 이벤트 핸들링하는 포스팅이다. click 이벤트와 change 이벤트 예제만 있으며 기본적인 이벤트들은 html, js 사용되는 이벤트들과 모양새가 비슷하다.


1. 이벤트 핸들링(Event Handling)

클래스 컴포넌트로 이벤트 핸들링 예제이다.


import React, { Component } from "react";

class ExEventHandling extends Component {
  state = {
    message: "",
  };

  render() {
    return (
      <div>
        <h>이벤트 핸들링</h>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({ message: e.target.value });
          }}
        ></input>
        <br />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({ message: "" });
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

export default ExEventHandling;



아래와 같이 이벤트 핸들링을 밖으로 꺼내 처리 할 수 있다.

import React, { Component } from "react";

class ExEventHandling extends Component {
  state = {
    message: "",
  };

  handleChange = (e) => {
    this.setState({ message: e.target.value });
  };

  handleClick = (e) => {
    alert(this.state.message);
    this.setState({ message: "" });
  };

  render() {
    return (
      <div>
        <h>이벤트 핸들링</h>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={this.handleChange}
        ></input>
        <br />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

export default ExEventHandling;



2. 함수형 컴포넌트

import React, { useState } from "react";

/**
 * 함수 컴포넌트로 이벤트 핸들링 예제
 */
const ExEventHandlingByFunComp = () => {
  const [message, setMessage] = useState("");

  const onChange = (e) => setMessage(e.target.value);
  const onClick = () => {
    alert(message);
    setMessage("");
  };

  return (
    <div>
      <h>이벤트 핸들링</h>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력해 보세요2"
        value={message}
        onChange={onChange}
      ></input>
      <br />
      <button onClick={onClick}>확인2</button>
    </div>
  );
};

export default ExEventHandlingByFunComp;