[JS] 콜백함수에 대해서

---

JavaScript에서 콜백 함수(callback function)는 비동기 프로그래밍과 이벤트 핸들링에 핵심적으로 사용되는 개념입니다. 콜백 함수는 함수를 다른 함수의 인자로 전달하고, 필요한 시점에 실행되도록 하는 메커니즘을 제공합니다.

콜백 함수의 기본 개념

콜백 함수는 주로 비동기 작업에서 사용됩니다. 예를 들어, 파일을 읽거나 네트워크에서 데이터를 가져오는 등의 작업은 시간이 오래 걸리기 때문에 이를 기다리지 않고 다음 작업을 수행해야 합니다. 이때 콜백 함수를 사용하여 작업이 완료되면 호출되도록 할 수 있습니다.

function fetchData(url, callback) {
  // 비동기 작업 수행
  // ...

  // 작업이 완료되면 콜백 함수 호출
  callback(result);
}

// fetchData 함수 호출
fetchData('https://api.example.com/data', function(result) {
  console.log(result);
});

콜백 지옥 (Callback Hell) 방지

콜백 함수를 중첩하여 사용하다 보면 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 이를 "콜백 지옥"이라고 부릅니다. 이를 해결하기 위해 Promise나 async/await과 같은 패턴을 사용하는 것이 일반적입니다.

Promise를 활용한 콜백 함수

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // ...

    // 작업이 성공적으로 완료되면 resolve 호출
    resolve(result);

    // 작업 중 오류가 발생하면 reject 호출
    // reject(error);
  });
}

// Promise 사용
fetchData('https://api.example.com/data')
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

콜백 함수의 다양한 활용

콜백 함수는 이벤트 핸들링, 타이머 함수, HTTP 요청 등 다양한 상황에서 활용됩니다. 아래는 간단한 예시입니다.

이벤트 핸들링에서의 콜백 함수

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

타이머 함수에서의 콜백 함수

setTimeout(function() {
  console.log('Delayed message');
}, 1000);

HTTP 요청에서의 콜백 함수

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

콜백 함수는 JavaScript에서 비동기 프로그래밍을 유연하게 다룰 수 있는 강력한 도구입니다. 비동기 작업을 처리할 때 적절하게 활용하면 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.