[Javascript] 콜백 (Callback) 함수 사용 방법

Javascript를 공부하다 보면 반드시 나오는 단어 중 하나가 바로 콜백(Callback) 함수입니다. 그리고 콜백 함수를 조금 더 쉽고 편하게 사용하기 위한 기능도 내장되어 있습니다.

 

 

이번 포스팅에서는 콜백 함수가 무엇이고 어떻게 사용한지 알아보도록 하겠습니다.

---

콜백(Callback) 함수란 무엇인가

콜백 함수는 어떤 함수를 실행시키고 난 이후에 결과를 받을 함수 혹은, 그다음에 실행될 함수를 의미합니다. 콜백 함수가 나오게 된 이유는 Javascript의 모든 이벤트는 모두 싱글 스레드입니다. 즉, 한 번에 한 가지 일만 처리하는 것이죠.

 

 

싱글 스레드의 경우는 작업을 요청한 이후에 그 작업이 끝날 때까지 다음 작업은 진행할 수 없습니다. 만약 통신 과정이 포함되어 있고 데이터를 보낸 이후에 답이 없다면 멈춰버리는 현상이 발생하게 됩니다. 이 경우에는 굉장히 큰 자원 낭비가 발생하게 됩니다.

 

위에서 설명드린 방법은 바로 동기식 프로그래밍 방법입니다. 과거 사용하던 방법이며 현재는 비동기식 프로그래밍을 사용하고 있습니다. 이 방법은 모든 이벤트를 다 실행하고 결과를 받는 순서대로 다음 처리를 진행합니다. 따라서 멈춰버리는 현상이 나타나 자원이 낭비되는 일이 줄어듭니다.

 

여기서 비동기 프로그램때문에 나온 함수가 바로 콜백 함수입니다. 콜백 함수는 비동시 이벤트가 실행되고 난 이후에 실행될 함수를 말합니다. 따라서 콜백 함수의 역할은 결과를 받아서 다음에 실행될 내용들을 프로그래밍합니다.

---

콜백 함수의 사용 방법

콜백 함수를 사용하기에 앞서 우선 기존 함수를 만들고 호출해 보겠습니다.

const hello = (name) => {
  console.log(`Hi! ${name}`);
}

hello('koonsland'); // Hi! koonsland

위 경우에는 이름을 입력받으면 Hi라는 메시지와 함께 이름을 출력하는 hello() 함수입니다. 이제 콜백 함수를 하나 더 만들어서 전달해 보도록 하겠습니다.

const hello = (name, callback) => {
  console.log(`Hi! ${name}`);
  callback();
}

const callbackFunc = () => {
  console.log('callback function');
}

hello('koonsland', callbackFunc);
// Hi! koonsland
// callback function

callbackFunc()라는 함수를 만들고 hello() 함수의 parameter로 전달하였습니다. hello() 함수는 내부에서 필요한 로직을 모두 실행한 이후에 마지막에 callback() 함수를 실행하도록 하였습니다. 이것이 콜백 함수가 호출되는 방법입니다.

---

콜백 함수의 대표적인 사용 예

콜백 함수는 실제로 어떻게 사용될까요? 이전 포스팅을 보셨다면 눈치채셨겠지만 바로 setTimeout()과 같은 함수에서 사용됩니다.

2021.05.23 - [쿤즈 Dev/JS HTML CSS] - [Javascript] 비동기(Asynchronous) 사용해보기

[Javascript] 비동기(Asynchronous) 사용해보기

원하는 시간 이후에 원하는 함수를 실행할 수 있습니다.

const hello = (name) => {
  console.log(`Hi! ${name}`);
}

setTimeout(hello, 2000, 'koonsland'); // Hi! koonsland

Javascript가 실행되고 2초 후에 Hi!라는 메시지를 화면에 출력하게 됩니다. 만약 프로그래밍이 진행되고 어떤 함수가 특정 시간 이후에 실행되도록 만들어 주고 싶다면 setTimeout() 함수에 콜백 함수를 parameter로 담아서 실행할 수 있습니다.

---

이번 포스팅에서는 콜백 함수에 대해서 알아보았습니다. 어떤 이벤트를 끝마치고 난 이후에 마지막에 실행될 함수를 의미합니다. 이러한 콜백의 원리를 이용해서 만든 라이브러리가 바로 Promise입니다. 다음 포스팅에서는 Promise에 대해서 다뤄보겠습니다. 도움이 되셨으면 합니다. 이상입니다.