CallBack function 다루기

기본적인 callback

callback 함수를 이용하여 자식 클래스로 부터 데이타를 전송받는 것에 대해 설명 드립니다.
rxjs 없이 콜백합수를 이용하여 호출된 함수가 특정 프로세스를 처리한 후 그 결과 값을 받을 수 있다.

class CallbackTest
{
  public myCallback: {(): void;};
  public doWork(): void
  {
    //doing some work...
    this.myCallback(); //calling callback
  }
}

var test = new CallbackTest();
test.myCallback = () => alert("done"); // 아래 doWork를 실행하면 그 결과 값을 받아서 처리 가능합니다.
test.doWork();

accept parameter

public myCallback: {(msg: string): void;};

return a value

public myCallback: {(msg: string): number;};

기존에 사용하던 방식

protected requestOtt(params: any, callback) {
  const api_url = apiUrl + '/create-onetime-token';
  this.http.get({url: api_url, params}).then((res) => {
    callback(res.body);
  });
}

this.requestOtt(userInfo, (paramObj: any) => {} // callback 함수를 이용하여  api 데이타를 받는다.

추천방식

protected requestOtt(params: any, callback: (body: any) => void) { // callback: (body: any) => void 처럼 callback 함수를 구체적으로 정의한다.
..........
}

다른 사용예제

위와 유사한 방식이지만 실전에 많이 사용하는 예제이다.
부모 클래스에서 자식 클래스를 호출한 후 자식클래스에서 발생한 이벤트를 받아서 실시간 처리하는 예제입니다.

• parent

const child = new Child();
this.game.init(
  (state: string) => {
    // state 가 변경될때 마다 특정 프로세스를 처리합니다.
  }
)

• child

export class Child {
  private stateCallback!: (state: string) => void;
  public init(
    stateCallback: (state: string) => void
  ) {
    this.stateCallback = stateCallback;
    this.updateState('ready');
  }

  private updateState(newState: any) {
    this.stateCallback(newState);
  }
}