[JS] 자바스크립트 비동기 - 콜백(Callback)

JavaScript의 코드가 실행되는 방식은 핵심 개념입니다. JavaScript는 단일 스레드로 작동하지만, 메인 스레드를 막지 않고 비동기 작업을 처리하는 데 강점을 가지고 있습니다. 여기서 콜백과 비동기 실행이 중요한 역할을 합니다. 이번 포스팅에서는 이 개념들을 쉽게 설명해 보겠습니다!

 

 

 

콜백 - 커버 이미지

 

콜백(Callback)

 

목차

 

1. 콜백이란?

2. 콜백을 이용한 비동기 처리

3. 콜백의 한계점 - 콜백 헬

마무리

추천글

 

콜백이란?

콜백(callback)은 하나의 함수에 파라미터로 전달되어 특정 작업이 완료된 후에 실행되는 함수입니다. 쉽게 말해, 파라미터로 변수나 값을 전달하는 게 아니라 함수를 전달해, "이 작업이 끝나면 이 함수도 실행해 줘"라고 지시하는 방법입니다.

function sayHello(name, callback) {
	let message = `안녕하세요. ${name}님!`;
    callback(message); // 매개변수 callback 함수 호출
}

sayHello('Kim', function(message) {
	console.log(message); // 안녕하세요. Kim님!
})

 

위 예제에서 보듯이 콜백 함수는 호출 함수에서 일회용으로 사용하는 경우가 많아 익명 함수로 사용합니다. 이는 코드의 간결성과 함수 이름의 충돌 방지를 위한 이유가 있습니다. 화살표 함수를 이용하면 좀 더 간결하게 코드를 작성할 수 있습니다.

function sayHello(name, callback) {
	let message = `안녕하세요. ${name}님!`;
    callback(message); // 매개변수 callback 함수 호출
}

sayHello('Kim', (message) => {
	console.log(message); // 안녕하세요. Kim님!
})

 

콜백을 이용한 비동기 처리

JavaScript는 코드가 한 줄씩 순차적으로 실행됩니다. 하지만 서버에서 데이터를 가져오거나 파일을 읽는 작업처럼 시간이 걸리는 작업도 존재합니다. 이때 JavaScript는 해당 작업이 완료될 때까지 기다리지 않고 다음 코드를 계속 실행합니다. 이것이 비동기 실행의 핵심입니다. JavaScript의 대표적인 비동기 실행으로는 setTimeout()이 있습니다.

 

setTimeout() 사용 예시

console.log('시작');

setTimeout(() => {
  console.log('1초 뒤 출력');
}, 1000);

console.log('끝');

 

자바스크립트는 단일 스레드로 코드를 위에서 아래로 순차적으로 실행한다는 특징이 있습니다. 그럼 위 코드를 실행하면 '시작' - (1초 대기) - '1초 뒤 출력' - '끝' 순서로 출력될까요? 아래 결과를 보겠습니다.

setTimeout() 실행 결과

 

'시작' - '끝' - '1초 뒤 출력' 순서로 출력된 것을 볼 수 있습니다. setTimeout() 함수는 콜백 함수의 실행이 끝날때까지 기다리지 않고 다른 코드를 실행하다가 다시 콜백  함수의 실행으로 돌아옵니다. 이런 함수를 비동기 함수라고 합니다.

 

콜백의 한계점 - 콜백 헬

여러 비동기 작업을 처리하다 보면 콜백을 중첩해서 사용하는 일이 생기고, 이는 콜백 헬(callback hell)로 이어질 수 있습니다.

doFirst((response) => {
  doSecond(response, (data) => {
    doThird(data,(result) => {
      console.log(result);
    });
  });
});

 

콜백 함수 기반의 코드는 모든 작업을 함수 안에서 처리하기 때문에 여러 작업을 이어서 하려면 콜백 안에 콜백을 중첩해서 사용해야 합니다. 이처럼 콜백 함수가 여러 단계로 중첩되면 코드가 복잡하고 읽기 어려워집니다. 이러한 문제를 콜백 헬(Callback Hell)이라고 합니다. JavaScript는 이러한 문제를 해결하기 위해 Promise와 async/await 같은 기능을 제공합니다.  

 

 

자바스크립트의 비동기 특성은 API 호출, 파일 처리, 복잡한 연산 같은 작업을 할 때 강력합니다. 콜백은 이러한 비동기 작업을 처리하는 기본적인 방법이지만, 코드가 복잡해질수록 Promise의 then이나 async/await 같은 방법을 사용해 가독성과 유지보수성을 개선할 수 있습니다. 다음 포스팅에서는 Promise의 then과 async/await에 대해서 다뤄보겠습니다.

 

 

추천글

2024.09.19 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트의 this?

[JS] 자바스크립트의 this?