class에서 this바인딩

class를 사용하고 class안의 함수를 다른 콜백으로 전달할 때에는 그 안에 포함돼 있는 class의 정보가 사라진다.
이렇게 되면 함수만 전달되고 class는 전달되지 않을 수가 있다.
this와 함수를 묶을 수 있는 바인딩을 사용할 수 있다.

예를 들어 this.onclick을 export 한다고 하면 onClick함수만 전달이 되고 class 안의 정보들은 전달되지 않는 문제가 발생한다.

this.element.addEventListener('click', this.onClick);

No.1

아래와 같이 this와 함수를 묶어 해결할 수 있다.

this.onClick = this.onClick.bind(this);

No.2

또 다른 방법으로는 arrow함수를 써주면 this가 유지된다.

this.element.addEventListener('click', (event)=> this.onClick(event));

No.3

또는 이렇게 변수에 함수를 할당해 전달하는 방법이 있다.

onClick = (event) => {
    ...
  }