react 클래스 컴포넌트의 this

리엑트에는 클래스 컴포넌트를 사용할 때는 this를 어떻게 사용하는지가 컴포넌트의 퀄리티를 바꾸게 됩니다. 튜토리얼이나 도큐먼트 문서를 보면 props나 state를 관리할 때 this를 사용하는 것을 많이 볼 수 있습니다. 그렇다면 this가 어떻게 사용되는지 알아보도록 하겠습니다.

import React from "react";

class App extends React.Component {
  // 상태값 num 선언
  state = {
    num: 0
  };

  // 버튼을 누르면 this.state.num을 1만큼 증가시킴
  increase() {
    this.setState(current => ({ num: current.num + 1 }));
    console.log("increase메서드의 this는", this);
  }

  render() {
    return (
      <div>
        <h1>Class Component this</h1>
        <h2>{this.state.num}</h2>
	    // 클릭 이벤트 핸들러의 콜백으로 컴포넌트 메서드 전달
        '''
          BAD CASE: <button onClick={this.increase()}>증가</button>
          CASE 1: <button onClick={this.increase.bind(this)}>증가</button>
          CASE 2: <button onClick={() => this.increase()}>증가</button>
        '''
      </div>
    );
  }
}

export default App;

코드를 해석해 보자면 App이라는 클래스 컴포넌트에 num이라는 state 값을 생성해 0을 할당하고 호출시에 num의 값이 1 상승하는 메서드를 button 엘리먼트에 할당한 상태입니다. 여기서 this는 App 함수 자체를 지목합니다.

 

여기서 주요한 점은 button에 메서드를 할당하는 방법입니다. 코드를 보면 BAD CASE, CASE 1, CASE 2를 개행하여 입력해 두었는데요. 이에 대해 알아봅시다.

 

BAD CASE

결과적으로 BAD CASE는 동작을 하지 않습니다. this는 App클래스 컴포넌트를 가르키고 그 안에 선언된 메서드를 바로 사용하지 못하는 점에 대해서 의문이 드는 게 당연하기 때문에 왜 그런지 해석해 보겠습니다.

 

컴포넌트에서 선언한 메서드들은 기본적으로 해당 컴포넌트를 this로 바인딩하고 있습니다. 하지만 JSX 이벤트 핸들러의 콜백 함수로 컴포넌트에서 선언한 메서드를 전달할 때는 전역 객체인 window에 this가 바인딩됩니다.

이제 BAD CASE를 해결하는 2가지 CASE에 대해 알아보겠습니다.

CASE 1

첫번째 방법은 bind를 사용하는 것입니다. Function객체의 메서드인 bind()는 어떤 함수의 this를 명시하는 역할을 합니다. 이 메서드가 호출되면 인자로 받은 객체를 함수의 this로 하는 새로운 함수를 리턴합니다.

CASE2

두 번째 방법은 화살표 함수를 사용하는 것입니다. 화살표 함수는 다른 함수와 달리 따로 this를 가지고 있지 않고, 항상 상위 스코프의 this에 바인딩합니다. 이벤트 핸들러의 인자로 넘긴 화살표 함수는 상위 스코프인 render() 메서드의 this인 App을 바인딩하고, 컴포넌트 메서드를 리턴하는데 이때 컴포넌트 메서드 앞에 붙는 this는 화살표 함수의 this, 즉 App을 가리킵니다.