웹 개발/데일리 토픽

콜백 함수 (Callback Function)

ecofinder 2024. 1. 15. 19:03
반응형

콜백 함수 (Callback Function)

안녕하세요 여러분! 오늘은 웹 개발에서 자주 사용되는 "콜백 함수"에 대해 알아보려고 해요! 🚀

콜백 함수는 다른 함수에 전달되어 특정 이벤트 발생 시 실행되는 함수를 말해요. 이를 통해 비동기적인 작업을 처리하거나, 코드를 재사용하고 모듈화할 수 있답니다. 😊

콜백 함수

콜백 함수의 작동 원리

콜백 함수는 다음과 같은 작동 원리를 가지고 있어요:

  1. 함수 A에서 함수 B를 호출할 때, 함수 B에게 콜백 함수를 인자로 전달합니다.
  2. 특정 이벤트가 발생하거나 조건이 충족되면 함수 B에서 해당 콜백 함수를 실행합니다. 콜백 함수는 함수 B의 제어권을 받아 실행되는데, 이때 필요한 정보를 인자로 받아 처리할 수 있어요.
  3. 콜백 함수의 실행이 완료되면, 함수 B는 원래의 동작을 계속 진행합니다.

콜백 함수의 예시

콜백 함수를 보다 쉽게 이해하기 위해 간단한 예시를 사용해볼게요. 아래 코드는 버튼 클릭 시 콜백 함수가 실행되는 예시입니다. 🔍

// 콜백 함수 예시
const buttonClickHandler = () => {
  console.log('와! 버튼을 클릭했어요! 🎉');
};

const addButtonClickListener = (callback) => {
  const button = document.querySelector('#myButton');
  button.addEventListener('click', callback);
};
  
// 버튼 클릭 시 콜백 함수 실행
addButtonClickListener(buttonClickHandler);

위 예시에서는 `addButtonClickListener` 함수를 사용하여 버튼에 클릭 이벤트 리스너를 추가합니다. 이때 `buttonClickHandler` 함수를 콜백 함수로 전달하여 함수 B에서 클릭 이벤트가 발생할 때 실행되도록 만듭니다. 버튼이 클릭되면 "와! 버튼을 클릭했어요! 🎉"라는 메시지가 출력되고, 이는 콜백 함수의 실행 결과입니다. 🖱️

콜백 함수의 활용

콜백 함수는 비동기적인 작업을 처리하는 데 많이 활용됩니다. 예를 들어, 서버에서 데이터를 가져오는 AJAX 요청이나 타이머가 만료될 때 특정 함수를 실행하는 등의 작업에 콜백 함수를 사용할 수 있어요.

// 비동기 콜백 함수 예시
const fetchData = (callback) => {
  setTimeout(() => {
    const data = '데이터가 도착했어요!';
    callback(data);
  }, 3000);
};

const handleData = (data) => {
  console.log(data);
};

// 데이터 가져오기
fetchData(handleData);

위 예시에서는 `fetchData` 함수를 사용하여 3초 후에 데이터를 가져오는 작업을 수행합니다. 데이터가 도착하면 콜백 함수인 `handleData`를 호출하여 결과를 전달합니다. 이를 통해 "데이터가 도착했어요!"라는 메시지가 출력되는데요, 이는 콜백 함수의 실행 결과입니다. ⏰

콜백 지옥과 해결책

콜백 함수를 연속적으로 사용하는 경우, 코드의 가독성이 떨어지고 복잡성이 증가할 수 있어요. 이를 "콜백 지옥"이라고 합니다. 하지만 이러한 문제를 해결하기 위해 Promise와 Async/Await 같은 기술도 사용할 수 있어요.

// 콜백 지옥 해결 예시 (Async/Await)
const getData = () => {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    setTimeout(() => {
      const data = '데이터가 도착했습니다!';
      resolve(data);
    }, 2000);
  });
};

const fetchData = async () => {
  try {
    const result = await getData();
    console.log(result); // '데이터가 도착했습니다!'
  } catch (error) {
    console.log(error);
  }
};

fetchData();

위 예시에서는 Promise와 Async/Await을 사용하여 콜백 지옥을 해결한 예시입니다. `getData` 함수는 비동기 작업을 수행하고, 데이터를 성공적으로 받아오면 `resolve`를 호출하여 결과를 반환합니다. 그리고 `fetchData` 함수에서 `await` 키워드를 사용하여 비동기 작업이 완료될 때까지 기다린 후 데이터를 출력합니다. ✨

콜백 함수는 웹 개발에서 많이 사용되는 중요한 개념이에요. 비동기 작업을 처리하거나 코드를 모듈화할 때 유용하게 활용할 수 있습니다. 콜백 함수에 대해 잘 이해하고 여러분의 웹 개발에 적극 활용해보세요! 💪😄

 

 

Apple 2023 맥북 프로 14 M3

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형