[동기/비동기] callback 함수

callback 함수란?

 

: callback 함수를 이해하려면 동기적,비동기적으로 실행되는 함수를 이해해야 한다.

 

<동기 실행>

 

프로그램 또는 함수가 동기적으로 실행된다는 의미는 A함수가 호출되고, A작업이 완료될 때까지 기다렸다가, A함수가 출력값을 반환한 이후에, B함수를 실행하겠다는 것을 의미한다. 

 

<비동기 실행>

 

A함수를 동기적으로 선언했을 경우, 프로그램은 로직의 흐름에 따라 A함수를 호출하기만 하고, B함수를 즉시 실행하게 된다. 이때, A 함수의 작업을 Main Thread가 아닌 별도의 Thread에서 처리하게 되고, 해당 작업은 완료된 이후에, Main Thread를 Call하게 된다. 호출된 비동기 A함수에서 작업을 완료한 이후에, 반대로 call을 하기 때문에 비동기 함수의 작업 완료시, 호출되는 함수를 Callback 함수라고 불린다. 

 

callback 함수가 호출 당화게 되면, 작업을 진행 중이던 Main Thread는 잠시 하던 작업을 멈추고, A함수의 작업 결과에 따른 추후 작업을 진행한 뒤에, Main Loic을 계속해서 수행해나가게 된다. 비동기적으로 실행할 경우, A  함수의 작업이 진행되는 동안 다음 작업을 계속 진행할 수 있으므로, 화면이 멈추는 문제는 발생하지 않고 빠르게 느껴질 수 있다.

 

단, A함수 이후에 수행하는 Logic에서는 A작업의 결과와 관련없는 작업들만 수행할 수 있고, A함수의 결과와 관련된 작업은 A함수와 관련된 Callback 함수 내에 정의 한다. 단점은, 프로그램 흐름이 복잡해지므로, 이해하기 어렵다는 점이 있다.

대표적으로, UI컴포넌트들의 Event 설정은 주로 Listener 설정과 (Evenet) Callback 함수의 결합으로 구성되어 있다.

 

예를 들어 , 자주사용 했던 ajax,jQuery에서도 사용했었는데 

 

$("#myButton").on("click", function () {
    // 콜백 함수
});

$.ajax({
    url : "URL",
    type: "GET",
    success: function () {
        // 콜백 함수
    },
    error: function () {
        // 콜백 함수
    },
    complete: function () {
        // 콜백 함수
    }
});

 

myButton의 on 메소드에 click 이벤트가 발생할 경우, 콜백 함수가 실행이 된다.

ajax는 ajax가 성공했을 경우 success의 콜백 함수가, 실패 했을 경우 error의 콜백 함수가, 완료 됬을 경우 complete 콜백 함수가 실행 된다.

이처럼 콜백(Callback)이란 옵저버(Observer) 디자인 패턴에서 나온 개념으로 객체의 상태 변화(이벤트)가 발생하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 한다.

 

또다른 예시를 보면 

 

위의 코드는 잘못되었는데, 이유는 비동기적으로 실행되는 함수는 호출만 하고 완료되기 전에 다음 작업으로 넘어가기 때문에, 비동기 함수 이후에 바로 진행되는 작업에서는 비동기적으로 실행되는 함수의 결과값과 관련된 작업을 처리할 수 없다.

 

Event Callback 함수 내에 비동기 함수의 결과값을 받아서, 다음 Logic을 모두 작성할 것이 아니라면, 함수가 비동기적으로 처리되는 경우에는 일반적으로 Callback 함수를 인자로 받는다

 

정리하자면 프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.

콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행 할 수도 있다.

좀더 풀어서 설명하자면, 비동기 A함수의 리턴값과 관련된 작업을 처리하는 C함수를 정의해둔 상태에서, 비동기 A함수를 호출하고, A함수의 완료시점에 미리 정의된 C함수를 호출하고 있다면, C함수는 바로 Callback 함수가 되는 것이다.

 

 

쉽게 풀어쓰는 정리

카페에서 커피를 주문할 때, 앞사람이 주문을 하고 주문한 커피를 다 제공한 다음, 다음 사람의 주문을 받는다면 동기적 처리  반대로 모든 사람의 주문을 한꺼번에 받고 커피가 완성되는 대로 사람들에게 커피를 제공한다면 비동기적 처리

 

 

 

 

https://sddev.tistory.com/22

콜백[Callback] 함수란?

 

https://beomy.tistory.com/10

[자바스크립트] 비동기프로그래밍 - 콜백함수(Callback function)

 

https://klyhyeon.tistory.com/259

[Vue.js] axios (비동기식 처리)

 

https://im-designloper.tistory.com/68

promise를 이용한 api 순차 반복 요청 보내기 (with - vue ,axios)