[Front end] Javascript 콜백

자바스크립트 비동기 포스팅에서 비동기 처리에서 나타날 수 있는 문제점을 다루어 봤다. 이러한 문제점을 해결할 수 있는 콜백 함수에 대해 알아보도록 하자.

 

첫 번째 사례 개선

---

function getData(callBackFn) {
    $.get('https://domain.com/system/users/PTN001112', function (response) {
    	callBackFn(response);
    });
}

getData(function (tableData){
	console.log(tableData);
});

 

두 번째 사례 개선

---

repeatConsoleLog = function(i, callBackFn) {
	setTimeout(function() {
		console.log(i);
		if (i >= 9) {
			callBackFn();
		} else {
			repeatConsoleLog(i+1, callBackFn);
		}
	}, 1000;
}

repeatConsoleLog(0, function() {
	console.log('done');
});

 

자바스크립트에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있고, 넘겨받은 함수를 언제 실행할지 결정할 수도 있다. 이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.

콜백을 적절히 활용하면 절차대로 코딩할 수 있지만 너무 많이 사용하게 되면 콜백 지옥에 빠질 수도 있다.

 

콜백 지옥(Callback Hell)

---

콜백 지옥은 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 웹서비스를 개발하다 보면 서버에서 데이터를 받아와 화면에 표시하기까지 여러 작업들이 있을 수 있다. 이 모든 과정을 비동기로 처리해야 한다고 하면 콜백 안에 콜백을 계속 무는 형식의 코딩을 하게 될 것이다. 이러한 구조는 코드의 가독성뿐만 아니라 로직 변경 또한 쉽지 않다. 이와 같은 구조를 콜백 지옥이라고 한다.