TIL_70_Call Back 함수

자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험
위의 영상을 참고로 작성하였음.

Sychronous Call Back
즉각적으로, 동기적으로 실행하는 Call Back.

Asynchronous Call Back
나중에, 언제 실행될지 예측할 수 없는 Call Back.

콜백함수는 왜 쓰나?

자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수.

Javascript의 비동기 처리?
특정 코드가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 코드를 실행하는 자바스크립트의 특성 (병렬적 실행)

자바스크립트에서 비동기 처리가 필요한 이유는?
화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 할지 모르는 상태에서 다른 코드를 실행하지 않고 기다릴 수는 없기 때문.

좀 더 쉽게 설명해보자면..

웹 페이지에서 서버로 부터 빠른 데이터를 수신하기 위해 AJAX(Asynchronous JavaScript and Xml)가 아닌JSON(JavaScript Object Notation)을 많이 사용하게 됨. -> 어떤 함수의 실행이 끝나기 전에 다른 함수가 실행되어버리는 동기화 방식으로 동작을 하기 때문에 순차적으로 데이터를 전달받게 됨.

예시) 제이쿼리의 AJAX :화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야할 때 ajax 통신을 사용하여 해당 데이터를 서버로부터 가져올 수 있다.

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

console.log(getData());

1. $get() : AJAX 통신을 하는 부분. 지정된 URL에 데이터를 보내달라고 요청하는 것.
2. 서버에서 받아온 데이터는 매개변수인 response에 담긴다.
3. tableData에 저장.
4. 받아온 데이터가 무엇인지 확인을 위해 console 찍어보기.
5. uedefined 출력

-> 왜 언디파인드가 뜨는 것인가.

$.get() 로 데이터를 요청하고 받아올 때까지 기다려주지 않고 바로 다음 코드인 return tableData; 를 실행했기 때문. -> 따라서 getData() 의 결과 값은 초기 값을 설정하지 않은 tableData의 값인 undefined를 출력하게 되는 것.

비동기 처리의 이해를 위한 예시 하나 더. setTimeout()

setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 web API의 한 종류

//#1
console.log('Hello');
//#2
setTimeout(function () {
    console.log('Bye');
}, 3000);
//#3
console.log('Hello Again');

어떤 식으로 콘솔이 출력되지 예상해보자.
1. 'Hello' 출력
2. 3초 있다가 'Bye' 출력
3. 'Hello Again' 출력
일거라고 생각한다면 경기도 오산임.

실제로는
1. 'Hello' 출력
2. 'Hello Again' 출력
3. 3초 후에 'Bye' 출력

-> setTimeout() 또한 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 실행하는 것이 아니라, 일단 setTimeout()을 실행하면서 바로 다음 코드인 console.log('Hello Again'); 을 실행한다. 그래서 Hello Again 이 출력되고 3초가 지난 뒤 Bye가 출력되는 것.

그.래.서 콜백함수가 필요하게 되는 것 !!

CallBack Function: 어떤 이벤트가 발생한 후에 수행될 함수를 의미.

데이터가 준비된 시점에서만 사용자가 원하는 동작을 수행할 수 있게 하는 것.

콜백함수로 문제를 해결해보자.

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);
        });
    });
  });
});

서버에서 데이터를 받아와 화면에 표시하기 까지 인코딩, 사용자 인증 등을 처리해야 하는 경우가 있따. 이 모든 과정을 비동기로 처리해야 한다고 하면 위와 같이 콜백 안에 콜백을 계속 묶어야 하는 형식으로 코딩을 하게 된다.
이런 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다. 이런 코드 구조를 콜백지옥이라고 한다.

콜백지옥 해결하기는 다음 편에 계속.....