콜백[Callback] 함수란?

# 개요

콜백[CallBack] 함수를 이해하려면, 먼저 동기적(Sync)으로 실행되는 함수와 비동기적(Async)으로 실행되는 함수에 대한 이해가 선행되어야 한다.

 

# 동기 vs 비동기 실행

  간편 설명을 위해, 프로그램 로직의 흐름에 따라, A함수가 호출되고, 뒤이어서 B함수가 호출되는 경우가 있다고 하자.

 

동기적 함수 동작 방식

  프로그램 또는 함수가 동기적으로 실행된다는 의미는 A함수가 호출되고, A작업이 완료될 때까지 기다렸다가, A함수가출력값을 반환한 이후에, B함수를 실행하겠다는 것을 의미한다. 대부분의 일반 함수는 동기적 방식으로 동작하고, 순차적으로 실행되기 때문에 단순하고 쉽다는 장점이 있으나, 무거운 작업(1초 이상 소요)을 수행하는 함수를 동기적으로 실행할 경우, 작업이 완료될 때까지 대기하느라, 전체적으로 프로그램의 Delay가 걸리게 되며, 작업이 진행되는 동안 화면이 멈추는 듯한 사용자경험을 가져올 수 있다. 실제로, A함수가 완료되기까지는 아무런 작업을 할 수 없게 되어, 내부적으로는 작업을 처리하고 있으나, 그 동안 사용자가 UI Interaction을 시도할 경우 응답없음 오류가 발생할 수 있다.

 

 

비동기적 함수 동작 방식

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

 

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

 

 단, A함수 이후에 수행하는 Logic에서는 A작업의 결과와 관련없는 작업들만 수행할 수 있고, A 함수의 결과와 관련된 작업은 A함수와 관련된 Callback 함수 내에 정의 한다. 단점은, 프로그램 흐름이 복잡해지므로, 이해하기 어렵다는 점이 있다. 대표적으로, Ui 컴포넌트들(Button, EditText, SelectBox 등)의 Event 설정은 주로 Listener 설정과 (Event) Callback 함수의 결합으로 구성되어 있다..

 

# Callback 함수란?

  원론적으로 프로그래밍에서 콜백(callback)은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

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

 

# Javascript로 보는 비동기 예시

  다음은, 비동기적 함수의 동작 방식을 제대로 이해하지 못하는 경우이다. 비동기적으로 실행되는 함수는 호출만 하고 완료되기 전에 다음 작업으로 넘어가기 때문에, 비동기 함수 이후에 바로 진행되는 작업에서는 비동기적으로 실행되는 함수의 결과값과 관련된 작업을 처리할 수 없다.

// setTimeout(함수, 밀리초);란 x초 이후에, 함수를 호출하라는 의미
// Javascript에서 제공하는 비동기적 함수이다.
function time(){
	setTimeout(function() {
    	return 'return value';
    	}, 1000);
}

// a -> undefined
var a = time(); 

// a is not 'return value'

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

function time(callback){
	setTimeout(function(){
    		callback('return value'); //비동기 작업 완료 후, 입력으로 받은 callback()함수 호출
    	},1000
}

var a;
time(function(r){
	a = r; //callback 호출될 때, a 변수에 'return value'이 할당됨.
});