이벤트핸들링1

1.리액트의 이벤트시스템
-이벤트이름은 카멜표기법으로 작성
- 이벤트 실행시 js코드를 전달 x, 함수 형태 값을 전달
-DOM요소에만 이벤트 설정(컴포넌트에는 이벤트 설정x)
ex) <MyComponent onClick={doSomething}/>  (x)
2.이벤트 종류
Clipboard,Composition,Keyboard,Focus,Form,Mouse,Selection,Touchm
UI, Wheel, Media,Image,Animation.Transition
참고문헌:facebook.github.io/react/docs/events.html

3.이벤트 핸들링 익히기 
-컴포넌트 생성, onChage 이벤트로 e.target.value 값 콘솔창에 찍기

//////App.js
import React from "react";
import EventPractice from "./EventPractice";

const App = () => {
  return <EventPractice />;
};

export default App;

//////EventPractice.js
import React, { Component } from "react";

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트연습</h1>
        <input
          type="text"
          name="mesage"
          placeholder="아무거나 입력해보세요"
          onChange={(e) => {
            console.log(e.target.value);
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

-this.setState 메서드로 state 업데이트하기

////EventPractice.js
		<input
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
            this.setState({
              message: "",
            });
          }}
        >
          입력
        </button>

-임의메서드만들기

/////////EventPractice.js

import React, { Component } from "react";

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

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(e) {
    this.setState({
      message: e.target.value,
    });
  }
  handleClick(e) {
    alert(this.state.message);
    this.setState({
      message: "",
    });
  }
  render() {
    return (
      <div>
        <h1>이벤트연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해보세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>입력</button>
      </div>
    );
  }
}

export default EventPractice;

-화살표함수로 이벤트핸들링

/////EventPractice.js
class EventPractice extends Component {
  state = {
    message: "",
  };

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