컴포넌트 안에서 method 호출 or arrow 함수 호출 (feat. this 이슈)

예를 들어 클릭 이벤트에 state 의 값을 변경하려고 함수 호출하거나 메서드를 호출한다.
ES6 문법의 arrow 함수 방식으로 호출할 경우는

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 1
  };
  handleInc = () => {
    this.setState({
      number: this.state.number + 1
    });
  };
  render() {
    return (
      <div>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handleInc}>증가</button>
      </div>
    );
  }
}
export default Counter;

증가 버튼을 클릭하면 onClick으로 handleInc 인 arrow 함수 호출하여 state 값을 변경하는 예제였다.
이 것을 ES6 문법이 아닌 예전 방식으로 코딩하면 아래와 같다.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1
    };
    this.handleInc = this.handleInc.bind(this);
  }
  handleInc() {
    this.setState({
      number: this.state.number + 1
    });
  }
  render() {
    return (
      <div>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handleInc}>증가</button>
      </div>
    );
  }
}
export default Counter;

constructor 안에서 이벤트 메서드를 this.handleInc = this.handleInc.bind(this); 이런식으로 this를 바인딩 해줘야한다.
그렇지 않으면 number 가 undefined 가 뜬다. this 가 참조하는 대상이 함수일 때와 메소드일 경우 다르기 때문이다.

개인적으로는 전자인 ES6 문법으로 적응해 나가는 것이 좋을 듯 하다.

TOP