React 핸들러 bind 함수 생략하기

arrow function방식을 이용하면 bind함수를 작성하지 않아도 된다.

 

일반 함수일 경우

import React, { Component } from 'react';

class Basic extends Component {
  constructor(props) {
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
  }

  onClickButton() {
    console.log('ok');
  }

  render() {
    return (
      <button onclick={this.onClickButton}>버튼</button>
    );
  }
};

export default Basic;

arrow function을 사용할 경우

import React, { Component } from 'react';

class Basic extends Component {
  constructor(props) {
    super(props);
    // this.onClickButton = this.onClickButton.bind(this); 생략 가능
  }

  onClickButton = () => { // 함수를 arrow function방식으로 작성
    console.log('ok');
  }

  render() {
    return (
      <button onclick={this.onClickButton}>버튼</button>
    );
  }
};

export default Basic;

 

참고자료: https://www.zerocho.com/category/React/post/578232e7a479306028f43393