07. Callback 함수

 

예전에 학교다니면서 아두이노 프로그램을 써본적이 있었는데 그 당시에 인터럽트라는 함수를 사용해본적이 있었다.

인터럽트 함수는 기존에 명령했던 동작을 수행하는 도중에 인터럽트가 발생하면 동작을 멈추고 그 인터럽트 함수의 동작을 수행한다.

이번에 배운 자바스크립트의 콜백함수는 그 당시 사용했던 인터럽트 함수를 떠올리게 했다. 물론 자세히 살펴보면 다른 동작이긴하지만..

자바스크립트에서는 콜백함수를 어떻게, 어떤 상황에서 쓰이는지 정리해보려한다.

---

callback함수란?

 

 콜백함수는 이름그대로 나중에 실행되는 함수이다. 나는 간단하게 '조건이 주어질 때 동작하는 함수'로 이해했다. 기본적으로 콜백함수는 다른 함수안에서 실행되는 또 다른 함수이다. 일반적으로 함수를 호출하면 그 함수가 매개변수로 받는 변수를 갖고 함수내의 동작을 수행하여 결과값을 return 한다. 하지만 이때 매개변수로 또 다른 함수를 받을 수 있다. 그것이 callback함수이다. 즉, callback함수는 그것을 매개변수로 갖는 상위의 함수가 호출될 때 바로 그 때 수행되는 함수 인 셈이다. 말로 설명하면 조금 복잡하지만 실제로 코드를 보면 좀 더 복잡할 수도 있다.  왜냐하면 callback함수는 진짜 사용자가 어떻게 사용하느냐에 따라서 무한히 복잡하게 설계할 수도 있기 때문이다.

 자바스크립트는 기본적으로 이벤트 중심 언어이다. 이벤트 중심언어는 동적이기 때문에 특정한 명령없이는 다른 동작을 기다리며 동작하지 않는다. 따라서 자바스크립트는 비동기식 처리방식을 채택하여 사용하는데 이 비동기 처리 방식의 문제점은 어떤 동작이 종료되기 전에 다음 동작이 실행된다는 것이다. 따라서 이 '기다리는' 문제를 해결해주기위해 이 콜백함수를 사용한다. 즉, 이 콜백함수를 이용하면 해당 코드, 동작을 잠시 멈추게 하고 어떤 동작을 먼저 수행해야하는지 알려줄 수 있다. 이 동기, 비동기 방식은 자바스크립트에서 굉장히 중요한 개념이라고 하니 나중에 더 자세히 다뤄보고 정리해야겠다.

 

callback함수 동작방식

// function
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
}

// callback function
function hello() {
    console.log('nice to meet you');
}

//함수호출
greet('HW', hello);

 

 위의 함수를 보면 매우 쉽게 콜백함수가 무엇인지 감잡을 수 있을 것이다. 가장 쉬운예제를 들고와봤는데 우선 첫번째로 콜백함수를 호출하는 가장 기본이 되는 함수가 있다. 여기는 두개의 매개변수를 인자로 받는데 첫번째는 흔히 사용하는 것처럼 일반적인 변수이고 두번째에 callback이라는 녀석을 인자로 받는다. 함수를 호출하는 곳에서 name에 해당하는 놈은 HW인걸 알겠는데 hello는 무엇일까? 그것은 아랫줄에 새로운 hello()라는 함수로 정의되어 있다. 즉, callback인자가 사용되는 곳에서 hello라는 함수의 동작을 수행하면 되는것이다. 왜 Callback 함수인지 느낌이 딱 온다. 필요하면 연락달라 이건가

 

Callback함수의 특징

 

•  비동기 방식

우리가 자바스크립트에서 사용하는 대부분의 방식은 동기 방식이다. 즉, 하나의 동작이 끝나야 그 다음 동작으로 넘어간다는 것이다. 그게 무슨뜻인지 이해가 잘 안갈때는 네이버 화면을 띄워보자. 새로고침을 누를때마다 위에서부터 순차적으로 화면이 구성되지 않고 이미지등과 같은것들은 조금 뒤늦게 데이터를 불러오는 것을 볼 수 있다. 이것이 비동기 방식이다. 다른 데이터를 불러오면서 또 다른 동작을 하고 있는 것이다. 그럼 콜백함수를 설명하는데 왜 동기 비동기 방식을 이야기하느냐 할 수 있다. 바로 이 콜백함수가 비동기프로그램이기 때문이다. 콜백함수를 사용하면 다른 작업을 먼저 수행하고 콜백함수의 동작을 수행하도록 할 수 있다.

 

• 콜백지옥

 첫번째와 같은 특징때문에 우리는 콜백지옥에 빠질 수 있다. 비동기 프로그램을 짤 때에는 실행 순서를 고려하며 코드를 작성하다 보니 생기는 특징인데 끝도없이 화면을 뚫고나가는 지옥에 갇히는 경우가 더러 있다한다. 나는 아직 그정도의 코딩을 해본적이 없어서 경험해보지는 못했지만 for문안에 무한 for문과 if문을 반복하는 그런경우같은 느낌인가..?

콜백안에 콜백안에 콜백안에..

---

 이번 포스팅이 가장 오래 걸렸다. 고민의 결과가 아직 이정도이지만 이 콜백함수에 대한 정리가 나조차도 부족해서 계속해서 서칭하고 공부하고 적용해보면서 이 포스팅을 추가해나가고 수정해나가야겠다. 어렵다 콜백.