JavaScript - 비동기 / 콜백함수

비동기 처리란?

JavaScript의 비동기 처리는 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것을 비동기 처리

ajax 비동기 처리 방식

function getAfunc() {
	var data;
	$.get('https://xxxx.com/xxxx/1', function(res) {
		data = res;
	});
	return data;
}

console.log(getAfunc()); // undefined

HTTP GET 요청을 날리고 응답으로 res에 응답데이터가 담기고, 그리고 선언한 data 에 데이터를 저장합니다.

여기서 getAfunc 를 실행시켰을 때 undefined 가 뜹니다. 이유는 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드를 실행하기 때문입니다. 이렇게 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다.

 

setTimeout() 의 비동기 처리

// 1
console.log('ONE');
// 2
setTimeout(function() {
	console.log('TWO');
}, 5000);
// 3
console.log('THREE');

 

결과 값은 아래와 같이 나오죠.

• ‘ONE’ 출력
• ‘THREE’ 출력
• 5초 있다가 ‘TWO’ 출력

setTimeout() 역시 비동기 방식으로 실행되기 때문에 5초를 기다렸다가 다음 코드를 실행하지않고 다음 코드인 "THREE" 먼저 출력하고 3초가 지나면 "TWO" 출력됩니다.

 

콜백 함수로 비동기 처리

function getData(callbackFunc) {
	$.get('https://xxxx.com/xxxx/1', function(res) {
		callbackFunc(res); // 서버에서 받은 데이터 res callbackFunc() 함수에 넘겨줌
	});
}

getData(function(data) {
	console.log(data); // $.get()의 res 값이 data 전달됨
});

이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다. 즉 데이터가 준비된 시점에서만 원하는 동작을 수행할 수 있습니다.

 

콜백 지옥 (Callback hell)

$.get('url', function(res) {
	getAfunc(res, function(id) {
		getBfunc(id, function(result) {
			getCfunc(result, function(text) {
				console.log(text);
			});
		});
	});
});

위와 같이 콜백 안에 콜백을 계속 무는 형식으로 로직을 작성하면 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵습니다. 이와 같은 코드 구조를 콜백 지옥이라고 합니다.

 

콜백 지옥을 해결하는 방법

 콜백 지옥을 해결하는 방법에는 Promise나 Async를 사용 또는 콜백 함수를 분리해주기 

function getAfunc(id) {
	auth(id, getBfunc);
}
function getBfunc(result) {
	display(result, getCfunc);
}
function getCfunc(text) {
	console.log(text);
}
$.get('url', function(res) {
	aValue(response, getAfunc);
});