[Javascript] 비동기 처리와 콜백 함수(asynchronous processing and callback)

 

 

1️⃣ 비동기 처리란 무엇일까?

---

비동기 처리의 가장 흔한 사례는 jquery의 ajax이다. 이 ajax를 통신을 통해 데이터를 서버로부터 가져올 수 있기 때문이다.

---

👀 아래의 ajax 코드를 한편 살펴보자.

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

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

---

▫ $. get()이 ajax 통신을 하는 부분
▫ https://domain.com에 HTTP GET 요청을 해서 product 1번을 요청
▫ 서버에서 받아온 데이터는 response 인자에 담김
▫ response; 코드로 받아온 데이터는 dongleData라는 변수에 저장
▫ 이 상태에서 getData()를 호출하게 되면 undefined 출력

---

❔ 왜 undefined가 출력되었을까

그 이유는 $. get()로 데이터를 요청하고 받아올 때까지 기다리지 않고 return dongleData;를 실행했기 때문이다. 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 dongleData의 값 undefined를 출력하게 된다.

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

---

2️⃣ 비동기 처리 해결하기 위한 콜백 함수의 사용

---

비동기 처리 방식에 의해서 발생될 수 있는 문제들을 해결하기 위해서 콜백(call back) 함수를 이용하게 된다.

---

❔ 콜백 함수(call back)는 어떻게 동작할까

콜백 함수는 말 그대로 나중에 호출되는 함수를 말한다. 그 동작 방식은 식당에 웨이팅을 하는 것과 같다.

예를 들어 어떤 식당을 방문하였는데 만석이어서 웨이팅을 하게 되었다고 가정해보자. 다행히 그 가게에는 웨이팅을 등록할 수 있는 키오스크가 있었고, 키오스크에 웨이팅 등록을 하고 근처에서 간단하게 쇼핑을 할 수 있었다.

쇼핑을 하다가 식당에서 연락(call back)이 왔고 나는 웨이팅 하는 시간을 다른 시간으로 채울 수 있어서 시간 낭비를 하지 않았다. 아래의 코드는 위의 코드에 callback 함수를 적용한 것이다.

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

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

✅ 이렇게 call back 함수를 사용하게 되면 비동기 처리 방식의 문제점을 해결할 수 있다.

---

3️⃣ 콜백의 무분별한 사용 ➡ 😈 콜백 지옥

---

웹 서비스를 개발하다보면 서버에서 데이터를 받아서 화면에 표시하기까지 다양한 과정들이 발생하게 되는데, 이 모든 과정들을 다 비동기 처리를 하게 되면 콜백에 콜백에 콜백을 하게 되고 혼란스러워지기 마련이다. 이러한 상황은 가독성, 재사용성, 유지 보수 측면에서 모두 문제가 발생하기 때문에 '콜백 지옥'이라고 부른다.

---

마무리 : ❔ 콜백 지옥은 어떻게 해결할 수 있을까

콜백 지옥을 해결하기 위한 방법으로는 Promise나 Async를 보통 이용한다고 한다. 다음 글에서는 Promise에 대해서 알아보도록 하겠다.