콜백함수에 대해서 알아보자!

 

콜백함수는 JS를 공부할때, 자주 접하게 되는 중요한 개념중 하날, 본 글에서는 콜백함수의 정의, 동작원리 그리고 예제와 활용처에 대해 기술해보고자 한다. 

1. 콜백함수의 정의

콜백함수란, "다른 함수의 인자로 전달된 함수" 를 의미한다

 

콜백함수는 다른 함수에 인수로 전달되어 실행되는 함수를 의미한다. 쉽게 설명하면, 특정작업이 완료된 후 실행되도록 설계된 함수이다.

콜백함수는 주로 비동기작업 (데이터 요청, 이벤트 처리)나 재사용 가능한 코드블록을 생성하는데 사용된다. 

 

출처 : 유튜브 별코딩

 

2. 콜백함수의 동작원리 

콜백 함수는 아래와 같은 방식으로 작동한다.

1. 함수 A가 함수 B를 인수로 전달
2. 함수 A의 로직이 실행되다가 적절한 시점에 함수 B를 호출

이러한 메커니즘 덕분에 비동기 프로그래밍에서 작업의 순서를 효과적으로 관리할 수 있다.

 

#함수 A
function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

#함수 B
function sayGoodbye() {
    console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

 

위 코드에서는 greet 함수가 이름을 출력한 뒤 전달받은 sayGoodbye 콜백 함수를 호출한다.

 

3. 콜백함수의 활용 사례

1) 이벤트 처리

웹 개발에서 콜백 함수는 이벤트 처리에 자주 사용된다. 

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

 

위 예제에서는 버튼 클릭 이벤트가 발생했을때, 실행될 콜백함수를 정의한다. 

(addEventListener 함수의 두 번째 인수로 전달된 익명 함수(function () { console.log("Button clicked!"); })가 콜백 함수로 작동)

 

2) 비동기 작업처리

비동기 프로그래밍에서도 콜백함수가 필수적이다. 예를 들어, 데이터를 서버에서 요청할때 다음과 같이 사용 가능하다.

 

function fetchData(url, callback) {
    setTimeout(() => {
        console.log(`Fetching data from ${url}`);
        callback("Data received");
    }, 2000);
}

fetchData("https://api.example.com", function (data) {
    console.log(data);
});

 

 

4. 결론

콜백함수는 JS 프로그래밍의 핵심 개념으로, 비동기 작업을 처리하거나, 동작의 흐름을 제어하는데 강력한 도구다. 하지만, 콜백함수가 지나치게 중첩되면, "콜백 지옥" 문제가 발생할 수 있어, 상황에 따라 Promise나 async/await을 활용하는것도 좋은 선택이다. 

 

끝!