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

 

 

 

비동기 처리??

 

어느 정도 시간이 소요되는 특정 코드가 실행될 때 이 코드의 실행이 완료될 때까지 멈추는게 아니라

다음 코드를 먼저 실행하는 것

 

 

---

 

비동기 처리의 가장 대표적인 예로 제이쿼리 ajax가 있다.

코드를 살펴보자

 

function getData() {
    var productData;
    
    $.ajax({
    	
        url	: "https://main.com/products/1",// 클라이언트가 요청을 보낼 서버의 URL 주소
        type	: "GET",			// HTTP 요청 방식(GET, POST)
        dataType: "json",			// 서버에서 보내줄 데이터의 타입
        
        success: function(response) {
            productData = response;
        }
    });
    
    return productData;
}

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

 

getData 메서드는 ajax 통신을 통해 결과를 response로 받고, productData에 넣어주고 있다.

그리고 productData를 리턴하는데

 

코드는 위에서 아래로 실행된다는 기준으로 위의 코드를 해석하면

console.log()를 통해 getData()를 호출하고, 결과를 출력해야 정상이지만 undefined를 출력하고 있다.

 

$.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고

다음 코드인 return productData;를 실행했기 때문이다.

따라서, getData()의 결과 값은 초기 값을 설정하지 않은 productData의 값 undefined를 출력한다.

 

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

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

 

물론 위에선 간단한 요청 1개만 보냈는데 만약 100개의 요청을 보낸다고 했을 때 비동기 처리가 아닌 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고.. 아마 웹 애플리케이션을 실행하는데 엄청나게 많은 시간이 소요 될 것이다.

 

 

---

어떻게 하면 콘솔에 ajax 통신 결과를 출력할 수 있을까?

그렇다면 콜백(callback) 함수를 이용할 수 있다.