React Class Method와 Arrow Function

render() 함수에서 JSX element 리턴 시 handleChange 속성 부분에 바로 함수를 구현하면 this.setState()를 사용함에 있어 문제가 되지 않는다.

하지만 class 함수로 빼게 되면 this keyword를 인식하지 못한다.

이때 constructor()에서 context를 binding 시켜주는 방법도 있지만 arrow function을 사용하면 별도의 binding 없이 사용 가능하다.

그냥 썼을 경우

<div className="App">
  <SearchBox
    placeholder="search monsters"
    handleChange={(e) => this.setState({ searchField: e.target.value })}
  />
</div>

일반 method로 구현

constructor() {
  super();

  ...

  this.handleChange = this.handleChange.bind(this);
}


handleChange(e) {
  this.setState({ searchField: e.target.value });
}


<div className="App">
  <SearchBox
    placeholder="search monsters"
    handleChange={this.handleChange}
  />
</div>

Arrow Function

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


<div className="App">
  <SearchBox
    placeholder="search monsters"
    handleChange={this.handleChange}
  />
</div>