arrow function 을 이용한 bind 이슈 해결

상황
export default class Field {
  constructor(carrotCount, bugCount) {
        ...
    this.field.addEventListener('click', this.onClick);
  }
  onClick(event) {
    const target = event.target;
    if (target.matches('.carrot')) {
      target.remove();
      sound.playCarrot();
      this.onItemClick && this.onItemClick('carrot');
    } else if (target.matches('.bug')) {
      this.onItemClick && this.onItemClick('bug');
    }
  }
...
}
위으 코드에서는 클래스의 생성자에서 addEventListener을 해주고 있다. 그리고 이벤트 핸들러로 onClick 메서드가 실행된다.
보기에는 잘될거같지만... 문제가 생긴다. 바로 this!! 이 문제는 간단하게 해결할 수 있다. 하지만 기존의 방법보다 더 좋은 방법을 찾게되어서 적어본다.
해결
1. 기존에 사용하던 방법
기존에는 간단하게 bind 메서드를 통해서 해결했다.
constructor(carrotCount, bugCount) {
    ...
  this.field.addEventListener('click', this.onClick.bind(this));
}
이렇게 되면 onClick 내부에서의 this 는 해당 객체가 되기 때문에 문제 해결!
2. 새로 알게된 방법
arrow function 을 이용한다.
constructor(carrotCount, bugCount) {
    ...
  this.field.addEventListener('click', event => this.onClick(event));
}
Arrow function 이 실행컨텍스를 건너뛴다는 건 알고있었지만, 막상 사용하지는 못하고 있었다. 새로운 방법을 알게 되서 기분이 좋다!
arrow function 을 사용한 더 우아한 방법
export default class Field {
  constructor(carrotCount, bugCount) {
        ..
    this.field.addEventListener('click', this.onClick);
  }
  // 메서드 자체를 arrow function 으로 만들자!
  onClick = event => {
    const target = event.target;
    if (target.matches('.carrot')) {
      target.remove();
      sound.playCarrot();
      this.onItemClick && this.onItemClick('carrot');
    } else if (target.matches('.bug')) {
      this.onItemClick && this.onItemClick('bug');
    }
  }
...
}
위의 방법은 메서드 자체를 arrow function 으로 만든것! 현업에서는 이렇게 자주 사용되는 것 같다.

유용한 링크

preventDefault - passive

Last modified 2yr ago