[DEV] 콜백 함수 Callback Function

1. 콜백 함수의 개념

콜백 함수(callback function)란 다른 함수의 인자로 전달되어 실행되는 함수이다. 쉽게 말해, 콜백 함수는 "다른 함수가 끝난 후 실행될 함수"라고 할 수 있다. 주로 비동기 처리에서 자주 사용된다.

콜백 함수는 동기적으로 실행될 수도 있고, 비동기적으로 실행될 수도 있다. 특히 비동기적 처리에서 많이 활용되며, 이벤트 기반 시스템, 네트워크 요청, 타이머 등 시간이 걸리는 작업을 처리할 때 자주 사용된다.

 

 

2. 콜백 함수의 동작 방식

콜백 함수의 동작은 간단하다. 외부 함수가 실행될 때 콜백 함수를 인자로 받아서, 특정 작업을 마친 후 콜백 함수를 호출한다. 콜백 함수는 비동기 처리가 필요한 경우, 작업이 끝난 후 실행된다.

// 콜백 함수 예시
function greet(name, callback) {
  console.log('Hello ' + name);
  callback(); // 콜백 함수 호출
}

function goodbye() {
  console.log('Goodbye!');
}

greet('Alice', goodbye); // "Hello Alice"가 먼저 출력되고, 그 후 "Goodbye!"가 출력됨

위의 예제에서는 greet() 함수가 콜백 함수인 goodbye()를 인자로 받아 실행한다. greet() 함수가 "Hello Alice"를 출력한 후 goodbye()를 호출하여 "Goodbye!"를 출력하게 된다.

 

 

3. 콜백 함수의 주요 용도

콜백 함수는 여러 가지 용도로 사용되며, 비동기 처리, 이벤트 핸들링, 배열 처리 등 다양한 상황에서 활용된다.

비동기 작업 처리

비동기 작업을 처리할 때 콜백 함수는 매우 유용하다. 예를 들어, 파일 읽기, 네트워크 요청, 타이머 설정 등 시간이 걸리는 작업을 할 때 콜백 함수를 사용하여 작업이 완료된 후에 결과를 처리한다.

// 비동기 작업 예시
setTimeout(function() {
  console.log('3초 후에 이 메시지 출력');
}, 3000);

위 코드는 setTimeout() 함수를 사용해 3초 후에 메시지를 출력하는 예시이다. 콜백 함수는 3초 후 실행된다.

 

배열 처리 (Array Methods)

콜백 함수는 배열 처리에서도 많이 사용된다. map(), filter(), forEach() 같은 배열 메서드에서 특정 작업을 수행할 때 콜백 함수를 활용한다.

// 배열 처리 예시
let numbers = [1, 2, 3, 4, 5];

// 배열의 각 요소에 2를 곱하는 작업
let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

위 예제에서는 map() 메서드가 각 요소에 2를 곱하는 작업을 콜백 함수로 처리한다.

 

이벤트 핸들링

이벤트 리스너에서도 콜백 함수를 자주 사용한다. 예를 들어, 버튼 클릭이나 마우스 움직임 같은 이벤트가 발생했을 때, 콜백 함수를 사용해 이벤트를 처리한다.

// 이벤트 핸들링 예시
document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼이 클릭되었다!");
});

이 예제에서는 버튼 클릭 시 알림 메시지를 띄우는 콜백 함수를 사용했다.

 

 

4. 콜백 함수의 단점 - "콜백 지옥"

콜백 함수는 유용하지만, 콜백을 여러 번 중첩해서 사용할 경우 코드가 복잡해지고 읽기 어려워지는 문제가 생긴다. 이를 "콜백 지옥(callback hell)"이라고 한다.

 

// 콜백 지옥 예시
asyncFunction(function(result1) {
  asyncFunction2(function(result2) {
    asyncFunction3(function(result3) {
      // 결과 처리
    });
  });
});

이렇게 콜백 함수가 중첩될 경우 코드의 가독성이 떨어지고, 관리하기 어려워진다. 이를 해결하기 위해 Promise나 async/await 같은 비동기 처리 방식을 사용할 수 있다.

 

 

5. 콜백 함수 개선 방법 - Promise와 async/await

Promise와 async/await는 콜백 지옥 문제를 해결하기 위한 방법이다. Promise는 비동기 작업의 성공 또는 실패를 처리하며, async/await는 더 직관적인 방식으로 비동기 코드를 작성할 수 있게 해준다.

Promise 사용 예시

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터를 가져왔다!');
    }, 2000);
  });
}

fetchData().then(result => {
  console.log(result); // '데이터를 가져왔다!' 출력
});

async/await 사용 예시

async function fetchData() {
  let result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터를 가져왔다!');
    }, 2000);
  });
  console.log(result); // '데이터를 가져왔다!' 출력
}

fetchData();

async/await를 사용하면 비동기 코드를 동기적으로 작성할 수 있어, 가독성이 좋아진다.

 

 

 

6. 결론

콜백 함수는 비동기 작업 처리, 이벤트 처리, 배열 처리 등 다양한 상황에서 중요한 역할을 한다. 하지만 콜백 지옥을 피하기 위해 Promise나 async/await 같은 방법을 사용하는 것이 더 나은 경우가 많다. 콜백 함수의 개념과 활용법을 잘 이해하면 비동기 프로그래밍을 효과적으로 처리할 수 있다.