[JavaScript] 비동기 처리

아래의 그림을 보면 동기적 처리와 비동기적 처리를 간단하게 확인할 수 있습니다. 대충 이해가 가시나요? 그림만 보고 정확하게 이해하기는 힘드니 어떤 상황에 사용하는지 어떤 의미인지 알아보겠습니다. \\^-^//

---

1. 비동기 처리

자바스크립트에서 비동기 처리는 특정 코드의 로직이 끝나는 것을 기다리지 않고 다음 코드를 먼저 실행하는 것을 의미합니다. 동기적 처리는 비동기 처리와 반대로 특정 코드의 로직이 끝나면 다음 코드가 실행되는 것을 말합니다.

 

비동기적 처리는 작업의 흐림이 끊어지지 않기 때문에 동시에 여러 로직을 처리할 수 있고, 다른 함수를 가져와 사용할 수 있습니다. 

 

예를 들어 한번 보겠습니다.

console.log('First');

setTimeout(function() {
	console.log('Second');
}, 5000);

console.log('Third');

// First
// Third
// Second

이처럼 비동기 처리는 setTimeout() 함수가 끝나는 것을 기다리지 않고 Third를 먼저 출력합니다. 

 

콜백 함수 이용한 비동기 처리

이번에는 위의 예를 조금 변경해서 확인해 보겠습니다.

function print(str){
	console.log(str);
}

function test() {
	let check = 'error';

	setTimeout(function() {
    	check = 'third';
    }, 5000);
    
    return check;
}

let result = test();

console.log('first'); // first
console.log('second'); // second
print(result); //error

setTimeout() 함수 때문에 check에 'third'들어가기 전에 함수가 호출되어 'error'가 나왔습니다. 이러한 문제를 해결하기 위해 콜백 함수를 사용해보겠습니다.

function print(str){
	console.log(str);
}

function test(callback) {
	let check = 'error';

	setTimeout(function() {
    	check = 'third';
        callback(check);
    }, 5000);
}

console.log('first'); // first
console.log('second'); // second
test(print); // third

위의 예시는 콜백 함수의 사용을 확인하기 위한 예시로 아래 콜백 함수로 ajax를 통해 데이터를 받아오는 방식의 코드를 한번 더 확인해 보겠습니다.

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

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

콜백 함수를 사용하여 데이터를 받고 tableData에 전달하였습니다. 만약 콜백 함수를 사용하지 않고 tableData를 확인하려고 했다면, 데이터가 다 받아지기 전에 tableData에 접근해 원하는 결과가 나오지 않았을 것입니다.

 

2. 콜백 지옥

비동기 처리가 한 번으로 끝나면 상관이 없지만, 비동기 처리가 끝난 데이터를 가지고 다시 비동기 처리를 해야하는 경우가 생깁니다. 아래의 경우는 콜백 함수를 반복적으로 사용하여 비동기 처리를 수행하는 경우입니다. 이는 가독성과 코드를 변경하기 어렵습니다.

a(function (resultsFromA) {
  b(resultsFromA, function (resultsFromB) {
    c(resultsFromB, function (resultsFromC) {
      d(resultsFromC, function (resultsFromD) {
        e(resultsFromD, function (resultsFromE) {
          f(resultsFromE, function (resultsFromF) {
            console.log(resultFromF);
          })    
        })
      })
    })
  })
});

위와 같은 콜백 지옥을 해결하는 방법으로는 Promise와 async/await을 사용하는 방법이 있습니다.

 

---

참고 문서

자바스크립트 비동기 처리와 콜백 함수