[ 웹 개발 ] 콜백 함수에 대해서 알아보자

  자바스크립트에서 비동기 프로그래밍은 웹 애플리케이션의 성능을 향상시키는 핵심 기술 중 하나입니다. 이를 가능하게 하는 중요한 개념이 바로 "콜백 함수"입니다. 이 블로그에서는 콜백 함수의 기본 개념부터 실제 활용 예시까지 자세히 알아보겠습니다.

콜백 함수란?
  콜백 함수는 자바스크립트에서 다른 함수의 매개변수로 전달되고, 나중에 호출되는 함수를 말합니다. 이는 자바스크립트가 함수를 일급 객체로 취급하여 함수를 변수에 할당하고, 다른 함수의 인자로 전달할 수 있는 유연성을 제공하기 때문에 가능한 개념입니다.

콜백 함수의 활용
- 비동기 프로그래밍
  비동기 프로그래밍에서 콜백 함수는 주로 비동기적인 작업의 완료를 처리하거나 결과를 다루는데 사용됩니다. 대표적으로 setTimeout, setInterval, XMLHttpRequest, 파일 읽기 등 비동기적으로 처리되는 작업들이 콜백 함수를 활용합니다.

 

// 비동기적인 콜백 함수 예시: setTimeout
console.log("시작");

setTimeout(function() {
  console.log("2초 후에 실행되는 콜백 함수");
}, 2000);

console.log("끝");

 

이벤트 핸들링 웹 애플리케이션에서는 사용자의 동작에 따라 이벤트가 발생합니다. 이러한 이벤트에 대한 콜백 함수를 등록하여 사용자의 입력에 즉시 반응하는 것이 가능합니다.

 

<!-- HTML 요소에 이벤트 핸들러 등록 -->
<button id="myButton">클릭해보세요!</button>

<script>
// 이벤트 핸들러에 콜백 함수 등록
document.getElementById("myButton").addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다!");
});
</script>

콜백 지옥 (Callback Hell)과 해결법 콜백 함수를 연속적으로 사용하다 보면 코드의 들여쓰기 수준이 깊어지고 가독성이 떨어지는 "콜백 지옥"이 발생할 수 있습니다. 이러한 상황을 해결하기 위해 Promise, async/await과 같은 기술들이 도입되었습니다.

 

// 콜백 지옥 예시
asyncFunc1(function() {
  asyncFunc2(function() {
    asyncFunc3(function() {
      // ...
    });
  });
});

// async/await를 활용한 해결법
async function asyncFunc() {
  await asyncFunc1();
  await asyncFunc2();
  await asyncFunc3();
  // ...
}

 

콜백 함수는 자바스크립트 비동기 프로그래밍의 핵심 개념으로서, 비동기 작업 처리와 이벤트 핸들링에 중요하게 활용됩니다. 하지만 콜백 지옥을 피하기 위해 Promise와 async/await 같은 현대적인 기술들을 적극적으로 활용하는 것이 좋습니다.