React 클래스 컴포넌트 이벤트 핸들러 할당 방식 3가지

seop·2022년 4월 23일
0

꿀팁

목록 보기
3/3

React Hook 을 사용하면 이런 고민을 할 필요가 없지만, 클래스 컴포넌트에서는 해야한다. 이 정도의 차이만 있다 알기만 하고 3번째 방법을 주로 사용하도록 하자. 1, 2 번째 방법을 알아두는것도 Javascript 를 이해하는데 있어 매우 중요한 개념이긴 하다.

1. 명시적(Explicit) this 바인딩 후 할당

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 의 설명을 보면 안에 자세한 설명이 있으니 궁금하면 참고해보자. 그게 아니라면 '안에 뭔가 있는 특수한 함수를 생성한다' 정도로만 이해해도 충분하다.

2. 인스턴스 메서드 호출에 의한 this 바인딩

class SomeParent {
  
  // 생성자 ...
  
  someHandler() { // ... }
  
  render() {
    <SomeChild onClick={() => this.someHandler()} />
  }
}

인스턴스 메서드를 호출하면 메서드의 this 는 호출을 수행한 인스턴스로 바인딩된다.

3. 실험적 문법 사용 후 할당

class SomeParent {
  
  // 생성자 ...
  
  someHandler = () => { // ... }
  
  render() {
    <SomeChild onClick={this.someHandler} />
  }
}

React 공식사이트에서 이는 실험적 문법이며 this 가 클래스의 인스턴스로 기본적으로 바인딩 된다고 소개하고 있다. 저 화살표 함수는 프로토타입에 할당되는것이 아니고, 인스턴스가 생성된 후에 속성에 할당되는 것이다. 따라서 저것이 사용될 시점엔 인스턴스가 있고 this도 제대로 바인딩 되기 때문에 따로 바인딩 처리를 하지 않아도 되는 것이다.

참고문헌

profile
지식을 주도하는 법을 터득하는중..

0개의 댓글