TIL 53일차_비동기처리1: 콜백함수

비동기

비동기란?
요청과 결과가 동시에 일어나지 않는 것.
따라서 다른 요청이 들어오면, 이전 요청의결과를 기다리지 않고 새 요청을 수행한다.

자바스크립트에서 비동기 처리가 필요한 이유를 생각해보자.
화면에서 서버로 데이터를 요청했을 때, 서버가 언제 그요청에 대한 응답을 줄지도 모르는데
다른 코드를 실행 안한 채, 무작정 기다리고 있을수는 없다.

비동기 처리방식의 문제점

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

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

getData()를 호출하면 받아온 데이터가 아닌 undefined가 리턴된다.
그 이유는 $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고
다음 코드인 return tableData;를 비동기적으로 실행했기 때문이다.

콜백함수로 비동기 처리방식의 문제점 해결하기

이러한 문제들은 콜백(callback)함수로 해결할 수 있다.

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

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

콜백지옥

그러나
웹서비스를 개발하다 보면,
서버에서 데이터를 받아와 화면에 표시하기까지
인코딩, 사용자 인증 등을 처리해야 하는 경우가 많다.
따라서 이 모든 과정을 비도이로 처리해야 한다고 하면
콜백안에 콜백을 계속 무는 형식으로 코딩하게 되어, 이런 코드구조를 콜백지옥이라고 한다.

$.get('url', function(response) {
    parseValue(response, function(id) {
        auth(id, function(result) {
            display(result, function(text) {
                console.log(text);
            });
        });
    });
});

이러한 콜백지옥은 Promise나 Async를 이용하여 쉽게 해결할 수 있다.

참고: 캡틴판교