MancityBallboy 흔적 남기기

비동기처리와 콜백함수

20 Jan 2021

비동기 처리란?

자바크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드이 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바 스크립트의 특성을 의미 합니다.

Example

function getData() {
    var tableData;
    $.get('https://domain.com/products/1', function(response) {
        tableData = response;
    });
    return tableData;
}

console.log(gerData()) // undefined

이와 같이 데이터를 용청하는 것이 비동기로 처리 되었기 때문에 미처 데이터가 다 불러 오기 전에 tableData가 리턴 되어서 undefined로 출력되게 되는 것이다. 간혹 네이버와 같은 홈페이지를 들어가면 어떤 부분은 먼저 나오고 어떤 부분은 빈칸으로 처리 되었다가 나중에 채워지는 것을 볼 수 있는데 이런 것들이 비동기 처리로 되어서 후에 표시되게 되는 것이라고 할 수 있다. 많은 정보를 가져오게 되면 그 정보를 하나 실행하고 기다리고 다시 하나 실행하는 과정에서 너무 많은 시간이 걸리기 때문에 비동기 처리가 필요한 것이다.

Example

console.log('Hello')

setTimeout(function(){
    console.log('Bye');
}, 3000);

console.log('Hello Again')

// Hello
// Hello Again
// 3초 후 Bye

setTimeout 역시 비동기 처리이기때문에 Hello Again 이후에 Bye가 출력되게 된다.

콜백 함수란?

콜백함수는 비동기 처리 방식의 문제점을 해결 할 수 있다.

Example

function getData(callbackFunc) {
    $.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨준다.	          
    });
}

getData(function(tableData){
    console.log(tableData);  // response의 값이 tableData에 전달됨.
});

이런식으로 콜백 함수를 사용하면 ajax 통신이 끝날때 원하는 동작을 실행 시킬 수 있습니다.

즉, 콜백함수는 우리가 원하는 비동기 처리를 한 후 다른 일을 하다가 그 비동기 처리가 끝난 시점에 원하는 동작을 할 수 있게끔 도와주는 것이라고 이해하면 될것이다.

조금 더 심화로 가면 콜백에 콜백의 꼬리를 무는 형식인 콜백 지옥을 해결할 수 잇는 Promise와 Async가 있다. 그 부분은 다음에 심화로 다시 알아 보도록 하겠습니다.

출처

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

Related posts