콜백 함수(Callback)

자바스크립트에서 비동기를 처리할 때 callback과 promise를 사용하게 된다.
먼저 callback 함수에 대해서 알아보자

 

비동기 처리?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고

다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

 

프로젝트 수행시 클라이언트와 서버 간 데이터를 주고 받는 과정이 필요하다.

이를 위해 HTTP 통신을 사용하게 되는데 이때 비동기처리의 문제점이 발생하게 된다.

 

아래의 ajax 통신 사례를 통해 알아보자

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

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

 

예를 들어 위와 같이 'https://domain.com/products/1' 에 HTTP GET요청을 날려

1번째 상품(products)정보를 요청하는 코드가있다.

 

코드를 보면 서버에서 받아온 데이터는 tableData라는 변수에 저장한다.

이후  getData()를 호출하여 console.log()를 통해 찍어보면 데이터는 없고 undefined가 찍히는것을

확인할 수 있다.

 

그 이유는 $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 

return tableData;를 실행했기 때문이다.

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

 

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

비동기 처리이다. 

자바스크립트에서 비동기 처리가 필요한 이유는, 화면에서 서버로 데이터를 요청했을 때
서버로부터 응답이 돌아올 시간을 자세히 알 수 없기때문에 다른 코드를 실행 하지 않고 기다릴 수 없기때문이다.
위에선 간단한 요청 1개만 보냈지만 요청이 무수히 늘어난다고 가정하면.

비동기 처리가 아니고 동기 처리라면 코드 실행하고 응답이 올때가지 기다리기를 반복할 것이다.

 

---

 

callback을 사용한 비동기 처리 예시 #1

아래는 web API인 setTimeout() 함수를 통해 안에있는 callback 함수를

1초뒤에 실행하게 함( 서버로 부터 통신이 1초뒤에 온 것을 가정 )으로써

위에서 $.get함수와 같이 HTTP 통신한 효과를 내었다.

setTimeout() - Web API | MDN

function check(callback) {
  setTimeout(() => {
    callback("i'm here!!");
  }, 1000);
}

check(function (msg) {
  console.log(msg);
});

check 함수는 첫번째 인자로 callback을 받고, callback이 실행 될 때 첫 번째 인자를 console에 출력한다.

callback이 실행되는 시점은 check함수 안에 있는 setTimeout으로 인해서 1초 후에 실행이 된다.

callback이 실행이 되면서 첫 번째 인자로 "i'm here!!"이 들어가고, 콘솔에 "i'm here!!"이 나타난다.

 

이렇게 callback을 통해서 어떠한 비동기 로직이 끝났을 때 callback 함수를 실행시킴으로써 비동기 작업이 완료 되었을 때 callback에서 작성한 어떠한 행동을 실행할 수 있게 된다.

 

---

callback을 사용한 비동기 처리 예시 #2

아래는 html 파일의 head 부분에

1. script 태그를 만들고 ( let script = document.createElement('script'); ) 

2. script 태그의 src 속성으로 path를 추가 하여

3. head에 추가하는 코드이다.

function loadScript(path) {
  1. let script = document.createElement('script');
  2. script.src = path;
  3. document.head.append(script);
}

4. loadScript('/my/script.js');

newFunction(); // 함수가 존재하지 않는다는 에러가 발생합니다!

4. 위에서 생성한 loadScript 함수를 실행한다. ( 불러온 '/my/script.js' 엔 "function newFunction() {…}"함수가 있다는 가정. )

5. loadScript 함수를 통해 스크립트를 불러와서 newFunction함수를 실행했지만 함수가 존재하지 않는다는 에러 발생 

 

에러는 예시#1에서 보았던 것 처럼 브라우저가 스크립트를 읽어올 수 있는 시간을 알지못하며, 시간을 충분히 확보하지

못했기 때문에 발생한다. 

 

이러한 문제를 콜백함수로 해결한다.

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('/my/script.js', function() {
  // 콜백 함수는 스크립트 로드가 끝나면 실행됩니다.
  newFunction(); // 이제 함수 호출이 제대로 동작합니다.
  ...
});

이렇게 두 번째 인수로 전달된 함수(대개 익명 함수, 예시에서는 callback이라는 이름의 함수)는

원하는 동작(위 예제에선 외부 스크립트를 불러오는 것 )이 완료되었을 때 실행됩니다.

 

이런 방식을 ‘콜백 기반(callback-based)’ 비동기 프로그래밍이라고 합니다.
무언가를 비동기적으로 수행하는 함수는 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 콜백을
인수로 반드시 제공해야 합니다.
위 예시에선
 loadScript의 인수로 callback이라는 함수를 제공해 주었는데, 이렇게 콜백을 사용한 방식은 비동기 프로그래밍의 일반적인 접근법입니다.

 

📚출처

---

https://ko.javascript.info/callbacks

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation