[Angular] CallBack 함수를 이용한 상호작용
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);
}
}