[React] Property Initializer Syntax를 사용한 메서드 작성

메서드 바인딩은 생성자 메서드에서 하는 게 정석!

하지만 이 작업을 불편하다고 느낄 수도 있다. 새 메서드를 만들 때마다 constructor도 수정해야 하기 때문...

이 작업을 좀 더 간단하게 하는 방법이 있는데, 바로 바벨의 transform-class-properties 문법을 사용해 화살표 함수 형태로 메서드를 정의하는 것!

• EventPractice.jsx

import React, { Component } from 'react';
 
class EventPractice extends Component {
 
  state = {
    message: ''
  }
 
  handleChange = (e) => {
    this.setState({
      message: e.target.value
    });
  }
 
  handleClick = () => {
    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;