콜백함수를 왜 사용하나?

http://youngman.kr/?p=635

http://inspiredjw.tistory.com/entry/JavaScript-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98%EC%9D%98-%ED%99%9C%EC%9A%A9

* 콜백(Callback)이란?

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

 

* 콜백함수를 왜 사용하나?

웹 페이지에서 서버로 부터 빠른 데이타를 수신하기 위해서 AJAX(Asynchronous JavaScript and XML)가 아닌 JSON(JavaScript Object Notation)을 많이 사용하게 된다. 이렇게 하면 문제는 동기화 방식(어떤 함수의 실행이 끝나기 전에 다른 함수가 실행 됨)으로 동작을 하기 때문에 순차적으로 데이타를 전달받게 된다.

특히 AJAX요청과 함께 사용하면 정말 강력하다. 예를 들어, AJAX요청을 해서 어떤 정보를 가져와 그 가져온 정보로 무엇인가를 처리해주고 싶다. 하지만 AJAX특성상 서버의 응답도 영향이 있기 때문에 같은 요청도 같은 컴퓨터일지라도 네트워크 환경 등 여러가지 변수 때문에 반응 속도가 천차만별이다.

하지만 콜백함수를 이용하게 되면 "어, 나 이 작업 다 끝났으니까 뭐 할 꺼 있으면 해" 라고 콜백함수가 메시지를 전달함으로써 확실히 가져온 데이터를 가지고 처리를 할 수 있게 된다.

 

==> 콜백함수 문법은 특정 함수의 동작이 끝남과 동시에, 다른 여러 가지 함수를 호출해야 할 경우에 사용된다.

 

* 사용 방식

매개 변수를 통해 함수를 받고, 그 함수를 통해 결과 값을 다시 호출하면 된다.

a->b 순으로 실행

callback 함수 : b()

 

<script>

function a (callback) { if(callback) callback(); }

function b () {}

a(b);

</script>

 

예제1) $.getJSON->getSum()

callback 함수 : sum(sum)

----------------------------------------------------------------

var getSum = function( callback ) {

$.getJSON("/ajax/getInfo", function( data ) { // ajax 실행 ②

var sum = data.number + data.people;

if( typeof callback == "function" ) { // getSum() 함수 실행 다 끝났니?

callback( sum ); // 콜백함수 실행 ③

}

});

};

function sum(sum) { // 콜백함수 실행 ③

alert( sum );

}

getSum(sum(sum)); // 함수 호출 ①

----------------------------------------------------------------

// getSum() 함수 호출

// 이 때, callback을 이용해 getSum()의 매개변수로 sum(sum){~}을 보냄

// callback은 함수 실행이 끝났음을 알리므로, getSum() 함수를 호출한 다음에 getSum() 함수의 실행이 끝나면 callback이 실행이 끝났음을 알리고 sum(sum){~} 함수를 실행하게 됨

// 이렇게 해주게 되면 getSum()이란 함수를 호출했을 때 ajax 로 값을 가져와 어떤 값들을 처리해서 그 결과 값을 콜백 함수로 보내줄 수도 있고 딱히 콜백함수를 통해 보내주는 parameter가 없더라도 콜백함수를 호출해 순차적으로 일을 처리할 수 있게 된다.

 

예제2) callbackTest->test 순서로 함수를 실행시키고 싶을 때,

----------------------------------------------------------------

// 콜백함수 정의

function callbackTest(arg){ // 콜백함수 실행 ③

alert(arg);

}

// 콜백함수를 호출할 함수 정의

function test( arg1, arg2, callback ){ // test 함수 실행 ②

if( typeof callback == "function" ){

callback(); // 콜백함수 실행 ③

}

}

 

test( 'a', 'b', callbackTest('xxx') ); // 함수 호출 ①

 ----------------------------------------------------------------