[React] Bind는 대체 무엇이며, 언제 사용하는가

React 문서를 읽다가 bind 메서드를 발견했다. 

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);		// ?????? 
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

bind 메서드를 많이 봤음에도 불구하고 왜 사용하는지, 어떠한 경우에 사용하는지 아직 모르고 있었다. 그래서 알아보았다.

 

this부터 이해하자

bind를 이해하기 위해선 this부터 이해해야한다고 한다. 이 this는 자바스크립트 전역에서 사용하는 표현으로써, 메서드가 포함된 객체를 바로 this라고 의미한다.

var obj = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};

즉, 해당 코드를 살펴보면 console.log(this.prop)에서의 this는 obj 객체를 의미하는 것이다. 

 

bind는 이럴때 사용한다

var obj = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};

// (1) 직접 호출
obj.sayHello();		// 결과: 'Hello'

// (2) 새로운 변수를 통해 호출
var reference = obj.sayHello;
reference();		// 결과: undefined

만약 obj 객체에 있는 sayHello란 함수를 다음 두 가지 방법을 통해 호출했다고 해보자

(1) 직접 호출의 경우 obj에 있는 sayHello 콘솔이 그대로 나타난다.

하지만 (2) 새로운 변수를 통해 호출을 할 경우, 결과로 undefined가 나타나게 된다. 이유는 새롭게 정의한 변수 reference에 obj.sayHello 값을 넣을때 객체 obj와 연결이 끊어지고 값만 담기기 때문이다.

이때 사용해야하는 것이 바로 'bind' 메서드다. 새롭게 변수를 통해 호출을 하고 싶다면 다음과 같이 사용해야 한다.

// (3) 새로운 변수를 통해 호출 - 맞는 방법
var reference = obj.sayHello.bind(obj);
reference();		// 결과: 'Hello'

 

React에서의 bind

리액트에서는 주로 constructor에서 binding을 사용한다. ES2015에서 제공하는 기능인 arrow function을 사용하면 this를 자동으로 바인딩 해준다고 한다.

import React, { Component, PropTypes } from 'react';
 
export default class Basic extends Component {
    state = {
           hidden: false,
      };
 
      onClickButton = () => {
        this.setState(() => ({ hidden: true }));
      }
    
    render() {
        return (
              <div>
                <button onClick={this.onClickButton}>숨기기</button>
              </div>
        );
    }
}

 

 

출처: https://jeong-pro.tistory.com/79 [기본기를 쌓는 정아마추어 코딩블로그]