React Hook 을 사용하면 이런 고민을 할 필요가 없지만, 클래스 컴포넌트에서는 해야한다. 이 정도의 차이만 있다 알기만 하고 3번째 방법을 주로 사용하도록 하자. 1, 2 번째 방법을 알아두는것도 Javascript 를 이해하는데 있어 매우 중요한 개념이긴 하다.
class SomeParent {
// 생성자 ...
someHandler() { // ... }
render() {
<SomeChild onClick={this.someHandler.bind(this)} />
}
}
this.someHandler
라는 식 자체는 함수 그 이상 그 이하도 아닌 아무것도 아닌 것이다. this.
가 붙였다고 해서 혼동하지 말자. this.
는 단지 속성을 찾아가기 위해 썼던 문법일 뿐이다. 아무튼 그냥 this.someHandler
를 할당해준다면 나중에 이것이 호출될 때, Javascript 암시적 이벤트 바인딩 규칙에 따라 window
가 this 바인딩 될것이다.
이를 해결하기 위해서는 this
가 정해진 ES6 특이 함수 객체(exotic function object)를 생성해야 한다. 이를 .bind(this)
로 수행할 수 있다. MDN 의 설명을 보면 안에 자세한 설명이 있으니 궁금하면 참고해보자. 그게 아니라면 '안에 뭔가 있는 특수한 함수를 생성한다' 정도로만 이해해도 충분하다.
class SomeParent {
// 생성자 ...
someHandler() { // ... }
render() {
<SomeChild onClick={() => this.someHandler()} />
}
}
인스턴스 메서드를 호출하면 메서드의 this 는 호출을 수행한 인스턴스로 바인딩된다.
class SomeParent {
// 생성자 ...
someHandler = () => { // ... }
render() {
<SomeChild onClick={this.someHandler} />
}
}
React 공식사이트에서 이는 실험적 문법이며 this
가 클래스의 인스턴스로 기본적으로 바인딩 된다고 소개하고 있다. 저 화살표 함수는 프로토타입에 할당되는것이 아니고, 인스턴스가 생성된 후에 속성에 할당되는 것이다. 따라서 저것이 사용될 시점엔 인스턴스가 있고 this도 제대로 바인딩 되기 때문에 따로 바인딩 처리를 하지 않아도 되는 것이다.