[javascript] 콜백 함수 기반 비동기 프로그래밍

14 Dec 2023

javascript

콜백 함수를 이용한 비동기 프로그래밍은 자바스크립트에서 매우 일반적으로 사용되는 패턴 중 하나입니다. 이 방식은 비동기 작업을 처리하고 결과를 처리하는데 유용합니다.

콜백 함수란?

콜백 함수는 다른 함수의 인자로 전달되는 함수로, 해당 함수가 완료된 후에 호출됩니다. 이를 통해 비동기 작업이 완료된 후에 콜백 함수가 실행되어 그 결과를 처리할 수 있습니다.

function fetchData(callback) {
  // 비동기 작업 수행
  setTimeout(() => {
    const data = '이 데이터는 비동기적으로 가져온 결과입니다.';
    callback(data); // 작업 완료 후 콜백 호출
  }, 1000);
}

function handleData(data) {
  console.log('데이터 처리:', data);
}

fetchData(handleData);

위 예제에서 fetchData 함수는 비동기 작업을 수행한 후에 handleData 함수를 콜백으로 호출합니다.

콜백 지옥과 해결법

콜백 함수를 계속하여 중첩해서 사용하다보면 코드의 가독성이 떨어지고 유지보수가 어려워지는 “콜백 지옥” 문제가 발생할 수 있습니다. 이 문제를 해결하기 위해 Promise나 async/await과 같은 기술이 등장하게 되었습니다.

예를 들어, Promise를 활용하면 다음과 같이 콜백 지옥을 해결할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = '이 데이터는 비동기적으로 가져온 결과입니다.';
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log('데이터 처리:', data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

결론

콜백 함수를 활용한 비동기 프로그래밍은 자바스크립트에서 중요한 개념이며, 최근에는 Promise나 async/await과 같은 기술로 보다 효율적인 비동기 코드 작성이 가능해졌습니다. 적절하게 활용하여 코드의 가독성과 유지보수성을 유의하면서 비동기 코드를 작성하는 것이 중요합니다.

이상으로 콜백 함수를 기반으로 한 비동기 프로그래밍에 대해 알아보았습니다.

참고 자료

MDN Web Docs: Callback function
MDN Web Docs: Promise