[Java 풀스택 개발자] #특별편(보충학습) - 콜백 함수에 대해

0. 들어가기에 앞서

본 포스트는 javascript 내의 함수 중에 콜백함수(callback function)에 대한 보충학습이다. 콜백함수에 대한 이론과 함께 콜백함수의 종류가 무엇인지에 대해서 다루고자 한다. 기본적으로 TIL 기록용인 본 포스트의 목적은 복습이지만 보충 학습 또한 중요한 부분이니 이해되지 않는 것들은 제대로 다룬다. 💪💪

 

1. 콜백 함수란 무엇인가?

과정 중 함수를 배우고 있었다. 그런데 강사님의 말씀에서 계속 나오는 그 말, '콜백 함수', '콜백'…! 그 콜백함수라는 게 대체 뭘까? 사실 이미 능숙하게 사용하고 있는 사람들도 그 정의에 대해서는 확실히 모를 수도 있다. 나도 사실 자주 사용해왔지만 그에 대해서 자세히 설명하라고 하면 제대로 할 수 있는지 모르겠다.

 

콜백? 그게 뭐지? 들으면서 멍해진다.

 

MDN에서의 정의로는 전달인자로 다른 함수에 전달되는 함수라고 한다. 이게 무슨 소리일까? 일단 콜백이라는 것이 컴퓨터 프로그래밍에서 어떤 역할을 하고 있는지부터 알아보도록 하자.

 

Ⅰ. 콜백의 정의

일단 콜백(CallBack) 이라는 건 다시 호출한다는 의미이다. 지금은 킵Keep해두었다가 나중에 다시 부르겠다는 이야기다. 흔히 이 콜백의 정의에 대해서 설명하기 쉬운 건 피자 주문일 것이다. 하지만 조금 더 최신식으로 해보면, 배달 앱에서 배달 옵션을 살펴본 적이 있는가? 거기의 옵션 중 하나로는 "도착하면 전화를 달라"가 있다.

 

피자 주문은 정말 고전적인 예시다.

 

배달앱이 나오기 전까지 사람들의 배달 루틴은 다음과 같았다. 배달 주문을 함 → 현관을 보면서 배달기사가 언제 올지 기다림 → 배달 기사가 벨을 누름 → 음식을 받음! 하지만 요즘은 배달앱을 통해서, 도착하면 배달 기사가 전화를 직접 해주는 옵션이 생겼다. 더 이상 현관을 보며 벨이 울리길 기다리지 않아도 되는 것이다.

즉, 콜백의 장점은 기다리지 않아도 된다이다.

 

이제는 기다리면 기사님이 알아서 와주신다

 

 

Ⅱ. 프로그래밍에서의 콜백

그렇다면 대충 프로그래밍에서도 콜백에 대해서 이야기하기가 쉬워질 것이다. 즉, "킵"해두었다가 필요할 때 "꺼낸다"! 함수를 냉장고에 저장해두었다가 필요할 때마다 꺼낼 수 있다. 따라서 콜백 함수는 변수에 저장이 되며, 언제든지 필요할 때 해당 변수를 불러올 수가 있다.

 

냉장고에서 보관해둔 재료들을 꺼내듯이.

 

여기서 MDN의 정의를 다시 살펴보자. 전달인자로 다른 함수에 전달되는 함수. 그렇다! 함수 자체가 변수가 되어서 다른 함수의 인자로서 작용하는 것이다. 그렇다면 매개변수나 기타 등등에도 사용할 수 있을까? 바로 그렇다. 그게 바로 콜백의 매커니즘이다. 좀 더 간단하게 그림으로 보면 다음과 같다.

 

콜백의 메커니즘

 

 

Ⅲ. Javascript에서의 콜백

이렇게 프로그래밍에서 콜백에 대해서 알았다면, 자바스크립트에서 콜백은 어떤 형태로 쓰일까? 다음이 가장 디폴트한 예제다.

 

function fnA(callback) {
  console.log('작업 중…');
  callback();  // 나중에 실행한다.
}

fnA(function() {
  console.log('작업 끝!');
});

 

대표적인 콜백 함수의 예제. 단, 이것은 동기화된 함수다.

 

 

2. 콜백의 이점

위에서 콜백의 가장 큰 이점은 기다리지 않아도 된다와 언제든지 꺼낼 수 있다라고 설명했다. 하지만 그 지점만으로는 뭔가 와닿지 않는다. 기다리지 않아도 된다? 언제든지 꺼낼 수 있다? 좀 더 와닿는 이야기는 없을까? 이걸 어떻게 사용하면 좋을까?

 

Ⅰ.비동기 작업 처리

기다리지 않아도 된다라는 건, 작업을 비동기로 해준다는 이야기다. 동기와 비동기는 또 뭘까? 동기라는 것은 데이터의 요청과 동시에 결과가 동일하게 출력되는 것을 의미한다. 이게 무엇이 문제냐면, 이 데이터 양이 너무 많다면, 계속 처리하는 화면을 보고 있어야 한다는 것이다. 게임에서 로딩 화면이 10초 이상 길어지거나, 수강신청 혹은 콘서트 티켓팅에서 1000번 이상의 대기를 해본 적이 있는가? 그런 일이 계속 일어날 수도 있는 게, 동기 작업 처리다.

 

하루종일 로딩화면과 흰 웹사이트를 보고 살 수는 없다.

 

반면 비동기는, 각각 병렬적으로 작업을 행한다. 요청을 보냈지만 당장 응답을 기다리지 않아도 된다. 우리가 한 회사에 이력서를 보냈다고 해서 그 회사의 합격/불합격만 하염없이 기다릴 수는 없듯이, 다른 회사에 이력서를 보내거나 할 수 있다. A작업을 기다리며 B작업을 할 수 있는 것, 그것이 비동기다.

이 때문에 콜백함수는 데이터 처리와 맞닿아있다. 사용자가 요청을 보낸 뒤, 서버가 DB에서 데이터를 찾고 있을 때 사용자에게 아무것도 하지 말고 가만히 있으라고 할 수는 없다. 그러므로 서버가 DB를 찾고 있는 동안, 사용자에게는 다른 것을 해도 좋다고 할 수 있다.

 

 

Ⅱ. 코드 재사용

말했듯, 함수는 즉시 실행 함수가 아니면 호이스팅이 가능하다. 이 때문에 계속하여 함수를 호출할 수 있고, 보관할 수도 있다. 이 부분은 유연성과도 관련이 있는데, 같은 함수로 다양한 동작이 가능하기 때문이다.

 

Ⅲ. 에러 처리

콜백 함수 중에서 제일 대표적으로 성공과 실패, 즉 에러가 없느냐 에러가 있느냐를 반환하는 것이 있다. 에러가 없을 경우 이런 함수를 출력해라, 에러가 있을 경우 이런 함수를 출력해라… 이걸 하나하나 if문을 사용하거나 하여 볼 수는 없다. 이 사용성은 위에 있는 유연성과도 관련이 깊다.

 

콜백이 없다면 아마 우리는 if문으로 이렇게 작성하고 있었을지도 모른다.

 

 

Ⅳ. 이벤트 처리

onclick, onload, onmouseover… 이러한 동작에 따른 이벤트들이 사실 콜백에 의해서 돌아가고 있다. 이러한 '동작'들이 만드는 '이벤트'가 하나의 함수를 인자로서 불러오는 것이다. 따라서 onclick="함수명" 또한 콜백이라고 할 수 있다.

 

 

따라서 콜백의 이점은 다음으로 간단히 정리할 수 있다.

 

 

 

3. 콜백의 사용법

여기부터는 사실 강의에서 배우지 않은 진정한 보충학습이다. 콜백을 불러일으키는 메커니즘들에 대해서 정리해보았다. 이들이 가장 자주 쓰이는 콜백의 사용법이다!

 

(1) setTimeout(), setInterval()

setTimeout은 마침 오늘 1월 12일에도 배운 적 있는 메서드다. setTimeout(함수,딜레이); 처럼 사용한다. 이것은 일정 시간의 시간이 지날 때 해당 함수를 실행하는 비동기 작업 함수이다. 

setInterval()은 setInterval (함수,실행간격); 처럼 사용한다. 이것은 일정 시간의 간격을 갖고 주기적으로 해당 함수를 실행하는 비동기 작업 함수다.

 

보다시피 이 setTimeout과 setInterval은 함수를 인자로 받는다. 그야 말로 콜백을 사용하는 사용처라고 할 수 있다.

 

setTimeout(function() {
  console.log('1초 후 실행합니다.');
}, 1000);

setInterval(function() {
  console.log('1초마다 실행합니다.');
}, 1000);

 

(2) fetch('url',{});

fetch는 네트워크 요청을 보내는 함수다. 위에서 비동기는 데이터 처리와 밀접한 관련이 있다고 했는데 fetch가 대표적인 데이터 처리 함수라고 할 수 있다. 다른 페이지에 네트워크 요청을 보내고, 그 결과 값을 받음으로써 특정 함수를 실행하는, 콜백 함수의 대표적인 예라고 할 수 있다.

fetch('/api/data', function(response) {
  console.log('데이터:', response);
});

 

fetch의 경우 GET이나 POST와 같은 데이터 처리나 에러 처리에 자주 사용되고 있다.

 

 

(3) onclick, onchange, onload…

위에서도 설명했듯, 특정 동작으로 이벤트를 일으키는 메서드다. 이들 또한 함수를 인자로 받으며, 해당 동작이 실행되면(onclick의 경우 클릭, onchange의 경우 값이 바뀜, onload는 로드됨) 인자로 받은 함수를 실행한다.

button.onclick = function() {
  console.log('클릭!');
};

 

 

(4) Array.forEach(function(item){});

함수를 인자로 받아 배열의 갯수만큼 수행한다. 배열만큼 무언가를 하고자 할때, for문이나 while문보다 복잡한 일을 처리할 때 자주 사용된다.

const number = [1,2,3];
number.forEach(function(item) { //이렇게 되면 세 차례 실행된다.
  console.log(item); //item은 각 배열의 요소가 되어 나타난다.
});

 

 

(5) animate, transition

애니메이션이 완료될 때 함수를 실행할 수 있다.

element.animate(properties, {
  duration: 1000,
  complete: function() {
    console.log('애니메이션이 완료 되었습니다.');
  }
});

 

 

(6) Array.filter(function(){});, Array.map(function(){});

filter는 배열에서 조건에 맞는 요소만을 골라서 새 배열을 만드는 함수이다. 그야말로 필터라고 할 수 있다. forEach와 비슷한 매커니즘이다. 이론 설명보다 바로 예제를 보여주는 게 이해에 좋아보여 적는다.

const num = [1,2,3,4,5];
num.filter(function(item) {
  return item % 2 === 0;  // 짝수인지 확인
});

 

이런 식으로 해당 조건에 맞는 값을 return해준다. if문과 비슷한 느낌이지만, 새 배열로 만들어준다는 게 크다.

만약 여기에 const filteredNum = num.filter(function(item)…(생략)…을 사용한다면, filteredNum에 num의 짝수만이 들어갈 것이다.

 

map은 배열의 각 요소를 특정 함수를 통해 변환해서 새 배열을 만든다. 이것 또한 forEach와 filter와 비슷한 매커니즘이다.

const num = [1,2,3,4,5];
num.map(function(item) {
  return item * 2; //두 배로 반환하여, 2,4,6,8,10의 배열이 만들어진다.
});

 

간단한 연산을 하여 배열로 돌려주는 함수이다.

 

 

4. 끝내기 전에…

한 가지 보충설명한다. 콜백함수는 '콜백'에 사용되는 함수를 의미하며, 콜백의 사용처들은 콜백 함수를 인자로 받는 것들이다. 둘이 헷갈려서 계속 헤매었다. 따라서 사용법이라고 쓰이는 건 일반적으로 콜백 메서드(Callback Method)라고 불리는 듯하다. 그리고 내일 중 복습용 TIL로 돌아오겠다.