JavaScript의 this 메소드

바인딩을 이해하기 위해서는 먼저 자바스크립트의 "this"라는 메소드의 이해가 무조건적으로 필요하다.
그래서 리액트의 바인딩을 알아보기 전에 자바스크립트의 this 메소드를 활용한 바인딩을 먼저 알아보자.

 let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
A.sayHello(); //"Hello"

자바스크립트에서 객체 안의 메소드 this는 이 메소드가 포함된 object를 가리킨다. 위의 예제에서 sayHello 메소드 안의 this는 a의 객체가 되어 a.prop인 Hello를 전달받아 콘솔에 Hello를 출력한다.

즉, 정리하자면 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 여기까지는 매우 기초적인 this의 활용법이다. 그렇다면 아래의 예제를 한 번 살펴보자.

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

let B = A.sayHello();
console.log(B); // undefined

이번에는 A의 sayHello()를 B라는 변수에 넣어 출력해보면 undefined가 출력되는 것을 확인할 수 있다.

그 이유는 바로 변수 B에 A.sayHello가 담길 때 sayHello()와 A와의 관계가 상실됐기 때문이다.
이럴때 필요한 것이 바로 "데이터 바인딩"이다.

JavaScript 바인딩

바인딩은 "묶다"라는 사전적 의미로, 코딩에서의 바인딩은 두 데이터 혹은 정보의 소스를 일치시키는 기법을 의미한다. 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 JavaScript 객체)를 일치시키는 것을 말한다. A와의 관계가 끊어져 슬프신 우리 sayHello(), 한 번 연결해보자.

let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
let B = A.sayHello.bind(A);
console.log(B); // Hello

바인딩 하는 방법은 매우 간단하다.
A.sayHello()를 전달할 때 A.sayHello.bind(A)와 같이 A까지 바인딩시켜서 보내면 된다.

지금까지 this 메소드를 이용한 JavaScript 내에서의 바인딩을 알아보았다. 하지만 React 내에서의 바인딩과 JavaScript내에서의 바인딩의 방법은 살짝 다르다. 다양한 방법이 있지만, React 내에서의 바인딩은 주로 Component에 이벤트메서드를 연결하는 방법으로 사용된다. 아래 예제를 한 번 살펴보자.

React 바인딩

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!' // 클릭하면 Goodbye 바뀌는 함수 
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClick}>Click</button>
      </div> // 온클릭 이벤트와 함수 연결 
    )
  }
}

위의 예제는 버튼을 눌러 Hello를 Goodbye로 만드는 예제인데 오류를 일으키는 코드이다. 바인딩을 하지 않았기 때문에 버튼을 눌렀을 때, Cannot read property 'setState' of undefined 에러가 발생한다. 그렇다면 아래와 같이 바인딩을 한 번 해보자.

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }

    this.handleClick = this.handleClick.bind(this); // 바인딩!!!!!!!!!!!
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!'
    })
    console.log(this) // EventBind
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button
          onClick={this.handleClick}> // 이벤트와 함수 연결 
          Click
          </button>
      </div>
    )
  }
}

constructor() 에서 this.update = this.update.bind(this); 문장을 집어넣어서 바인딩시키면 render()에서 onClick={this.update}를 할 때 this가 App컴포넌트의 this라는 것을 알게 되는 것이다.

이 외에도 React에서 바인딩 하는 방법 중 ES2015에서 제공하는 기능인 arrow function을 사용하면 바인딩할 수 있는데, onClickButton 메서드를 "() =>" arrow function으로 만들면 된다.