callback

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

---

비동기 처리란?

- 특정 코드의 연산이 끝날때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 처리하는 방식

- 쉽게 설명하면. 코드는 순차적으로 읽히지만. 비동기는 아님!

- 대표적으로 callback, setTimeOut, setinterval 등이 있다.

 

---

callback (이하 콜백)

- 비동기 처리 함수

- 쉽게 설명을 하자면. 콜백 함수를 받는 곳을 지정하고. 특정 시점에서 호출할때 진행됨

ngAfterViewInit() {    this.초록색 컴포넌트 = this.초록Canvas!.createComponent<초록컴포넌트>(초록컴포넌트);    this.초록색 컴포넌트.instance.callbackFunc = (받으려는 인자: 유형) => {        사용하려는 변수 = 받으려는 인자        console.log('가장 마지막 위치')    } console.log('순차적 진행') }

callbackFunc!: Function; 특정메서드() {    this.callbackFunc(보내려는 인자)    console.log('초록 메서드 발동') }

1. 진행순서

1). 회색 컴포넌트 생성(부모 컴포넌트)

2). ngAfterViewInit 에서 초록색 컴포넌트 생성   this.초록Canvas!.createComponent<초록컴포넌트>(초록컴포넌트); 

3). 회색 컴포넌트에서 callback 받는 부분을 지정

4).  console.log('순차적 진행') 

5). 초록색 메서드를 발동 후  console.log('초록 메서드 발동')  ->  console.log('가장 마지막 위치') 

 

2. 요약

    - 원하는 위치에서 발동되는 시점에 데이터 등을 연결 받아 사용 가능함

    - 뭐든 다 장단점이 있는 것 처럼... 장점은 한번에 일괄 처리를 할 수 있지만

      맞물려 단점도 문제가 생길 경우 한번에 에러 발생

    - 유사한 쓰임새로 matherComp 라는게 있다.

 

   2-1). matherComp 

       - 장점은. callback 은 어디에서 어떤 데이터를 받아오는지 하나하나 체크해야 하지만

         matherComp 는 뿌리를 지정(부모 컴포넌트)하기 때문에 코드 해독이 빠르다.

       - 하단에서 matherComp!: 부모 컴포넌트 로 변수 선언을 하고. instance.(변수, 함수 등) 처럼 사용할 수 있다.

 

 

this.HardWareTotalEquipsComponent.instance.matherComp = this;

 

//callback함수와 같은 기능   matherComp!:  부모 컴포넌트 this.matherComp!.변수 = 자식 컴포넌트에서 사용하려는 변수; this.matherComp!.메서드(); console.log(this.matherComp.변수)  ~ callback + 주석의 역할을 할 수 있다.

---