Note 자바스크립트의 this 바인딩

자바스크립트에서 this는 함수가 호출된 곳에 따라 다르다. this가 컴포넌트 클래스를 참조하도록 하려면 적절한 컨텍스트에 함수를 바인딩해야 한다(this 값이 컴포넌트 클래스가 되도록 한다).

ES6+/ES2015+를 사용한다면 내가 이 책에서 하는 것처럼 화살표 함수를 사용해서 자동으로 바인딩된 함수를 생성할 수 있다.

setInterval(() => {
  this.setState({
      currentTime: (new Date()).toLocaleString('en')
  })
}, 1000)

자동 바인딩은 화살표 함수로 생성된 함수가 현재 this 값을 갖게 됨을 의미하며, 이 경우에는 Clock 컴포넌트가 된다.

수동으로 하는 방법은 클로저에서 bind(this) 메서드를 사용하는 것이다.

function() {...}.bind(this)

Clock 컴포넌트에서 한다면 다음과 같다.

setInterval(function(){
  this.setState({
      currentTime: (new Date()).toLocaleString('en')
  })
}.bind(this), 1000)

이 방법은 React에만 사용할 수 있는 것은 아니다. 함수의 클로저에서 this 키워드가 변경되므로 일종의 바인딩이 필요하다. 컨텍스트(this) 값을 저장해 놓았다가 다음에 다시 사용하는 방법도 있다.

일반적으로 self, that, _this 같은 변수를 원래의 this를 담아 두는 목적으로 사용한다. 다음과 같이 작성한 코드를 본 적이 있을 것이다.

var that = this
var _this = this
var self = this

매우 단순한 방법이다. 변수에 담아 두었다가 클로저에서 this를 참조하는 대신 이 값을 사용하는 것이다. 새로운 변수는 원래의 this 값을 복사한 것이 아니라 참조다. 이 방법으로 setInterval()을 작성하면 다음과 같다.

var _this = this
setInterval(function () {
  _this.setState({
      currentTime: (new Date()).toLocaleString('en')
  })
}, 1000)