[typescript] 타입스크립트에서 'this' 바인딩 문제 해결하기

최근 타입스크립트 프로젝트에서 클래스 내부 메서드를 setTimeout이나 setInterval 등과 함께 사용할 때 this 바인딩 문제에 직면했습니다.

일반적으로 자바스크립트에서 setTimeout과 같은 비동기 함수는 메서드 내부에서 this가 바인딩되지 않는 문제를 발생시킬 수 있습니다.

이는 자주 발생하는 문제로, 예를 들어 다음과 같은 코드에서 문제가 발생합니다

 

class Counter {
  count: number = 0;

  increment() {
    this.count++;
    console.log(this.count);
  }

  startCounting() {
    setInterval(this.increment, 1000);  // this가 바인딩되지 않아 오류 발생
  }
}

const counter = new Counter();
counter.startCounting();

 

위 코드를 실행하면, this가 제대로 바인딩되지 않아서 this.count가 **undefined**로 출력됩니다. 이 문제는 setInterval 내에서 this가 해당 클래스의 인스턴스를 가리키지 않기 때문입니다.

 

 

해결방법

이 문제를 해결하는 방법은 this를 명시적으로 바인딩하는 것입니다. setInterval 내에서 this를 사용할 수 있도록 **bind()**를 사용하거나, 화살표 함수를 사용하는 방식이 있습니다.

방법 1: bind() 사용

bind() 메서드는 this를 명시적으로 바인딩할 수 있습니다. increment 메서드를 setInterval에 전달하기 전에 bind를 사용하여 this를 클래스 인스턴스로 바인딩합니다.

class Counter {
  count: number = 0;

  increment() {
    this.count++;
    console.log(this.count);
  }

  startCounting() {
    setInterval(this.increment.bind(this), 1000);  // this를 명시적으로 바인딩
  }
}

const counter = new Counter();
counter.startCounting();

 

 

이렇게 하면 this가 제대로 바인딩되어 count 값이 정상적으로 출력됩니다.

방법 2: 화살표 함수 사용

화살표 함수는 자기 자신을 바인딩하는 특성을 가집니다. 즉, 화살표 함수 내에서는 this가 상위 스코프의 this를 그대로 참조하게 됩니다. 이를 활용하면 bind() 없이도 this 문제를 해결할 수 있습니다.

class Counter {
  count: number = 0;

  increment() {
    this.count++;
    console.log(this.count);
  }

  startCounting() {
    setInterval(() => this.increment(), 1000);  // 화살표 함수 사용
  }
}

const counter = new Counter();
counter.startCounting();

위 코드에서 setInterval 안의 화살표 함수는 increment 메서드를 호출하는데, 이때 this는 Counter 클래스의 인스턴스를 정확히 참조하게 됩니다.

결론

타입스크립트에서 this 바인딩 문제는 비동기 함수나 콜백 함수에서 자주 발생하는 문제입니다. 이를 해결하기 위해서는 bind()를 사용하거나, 화살표 함수를 활용하여 this가 클래스 인스턴스를 정확히 가리키도록 해야 합니다. 이처럼 간단한 방법으로 this 문제를 해결할 수 있습니다.

이 글에서 다룬 내용을 바탕으로, 비슷한 문제에 직면했을 때 어떻게 해결할 수 있을지 고민해보세요.