JavaScript 콜백 함수 개념 이해 - 간단 가이드

콜백 함수란?

콜백 함수(Callback Function)는 다른 함수의 매개변수로 전달되어, 특정 시점에 호출되는 함수입니다. "나중에 다시 호출(call back)한다"는 의미에서 콜백이라고 부릅니다.

🔍 콜백 함수의 핵심 개념

// 콜백 함수를 받는 함수
function greetUser(name, callback) {
    console.log("안녕하세요, " + name + "님!");
    callback(); // 콜백 함수 실행
}

// 콜백 함수 정의
function showWelcome() {
    console.log("환영합니다!");
}

// 사용
greetUser("김철수", showWelcome);

실행 결과:

안녕하세요, 김철수님!
환영합니다!

---

기본 사용법

1단계: 간단한 콜백 함수

// 계산 후 결과를 처리하는 콜백
function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

// 콜백 함수들
function showResult(result) {
    console.log("결과: " + result);
}

function doubleResult(result) {
    console.log("두 배: " + (result * 2));
}

// 사용 예제
calculate(5, 3, showResult);    // "결과: 8"
calculate(5, 3, doubleResult);  // "두 배: 16"

2단계: 익명 함수로 콜백 사용

// 익명 함수를 콜백으로 전달
calculate(10, 20, function(result) {
    console.log("계산 완료: " + result);
});

// 화살표 함수로 더 간단하게
calculate(4, 6, result => console.log("합계: " + result));

실행 결과:

결과: 8
두 배: 16
계산 완료: 30
합계: 10

3단계: 조건부 콜백

function processData(data, successCallback, errorCallback) {
    if (data && data.length > 0) {
        successCallback(data);
    } else {
        errorCallback("데이터가 없습니다");
    }
}

// 사용
processData(["A", "B", "C"], 
    data => console.log("성공:", data),
    error => console.log("오류:", error)
);

processData([],
    data => console.log("성공:", data),
    error => console.log("오류:", error)
);

실행 결과:

성공: ["A", "B", "C"]
오류: 데이터가 없습니다

---

실무 활용 예제

1. 배열 메서드에서의 콜백

let numbers = [1, 2, 3, 4, 5];

// forEach: 각 요소에 콜백 실행
numbers.forEach(num => console.log(num * 2));

// map: 콜백 결과로 새 배열 생성
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 콜백 조건에 맞는 요소만 선택
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

2. 이벤트 처리

// 버튼 클릭 이벤트 (브라우저 환경)
let button = document.getElementById('myButton');
if (button) {
    button.addEventListener('click', function() {
        console.log("버튼이 클릭되었습니다!");
    });
}

// 더 간단하게
button?.addEventListener('click', () => {
    console.log("클릭됨!");
});

3. 타이머 함수

// setTimeout: 지연 실행
setTimeout(() => {
    console.log("3초 후 실행");
}, 3000);

// setInterval: 반복 실행
let count = 0;
let timer = setInterval(() => {
    count++;
    console.log("카운트: " + count);

    if (count >= 5) {
        clearInterval(timer); // 타이머 종료
        console.log("타이머 완료");
    }
}, 1000);

4. API 호출 시뮬레이션

// 가상의 API 함수
function fetchUser(id, onSuccess, onError) {
    // 실제로는 서버 요청
    setTimeout(() => {
        if (id === 1) {
            onSuccess({ id: 1, name: "김철수", email: "kim@example.com" });
        } else {
            onError("사용자를 찾을 수 없습니다");
        }
    }, 1000);
}

// 사용
fetchUser(1, 
    user => console.log("사용자 정보:", user),
    error => console.log("에러:", error)
);

fetchUser(999,
    user => console.log("사용자 정보:", user),
    error => console.log("에러:", error)
);

실행 결과:

2
4
6
8
10
[2, 4, 6, 8, 10]
[2, 4]
3초 후 실행
카운트: 1
카운트: 2
...
사용자 정보: {id: 1, name: "김철수", email: "kim@example.com"}
에러: 사용자를 찾을 수 없습니다

---

주의사항

1. 콜백 지옥 (Callback Hell)

// ❌ 나쁜 예: 콜백이 중첩되어 복잡함
getData(function(a) {
    getMoreData(a, function(b) {
        getEvenMoreData(b, function(c) {
            // 너무 깊은 중첩...
        });
    });
});

// ✅ 개선: 함수 분리
function handleA(a) {
    getMoreData(a, handleB);
}

function handleB(b) {
    getEvenMoreData(b, handleC);
}

function handleC(c) {
    console.log("최종 결과:", c);
}

getData(handleA);

2. this 바인딩 주의

let obj = {
    name: "객체",

    // 일반 함수 메서드
    normalMethod: function() {
        setTimeout(function() {
            console.log(this.name); // undefined (this가 다름)
        }, 1000);
    },

    // 화살표 함수로 해결
    arrowMethod: function() {
        setTimeout(() => {
            console.log(this.name); // "객체" (this 유지)
        }, 1000);
    }
};

3. 에러 처리

// 콜백에서 에러 처리
function safeCallback(callback) {
    try {
        if (typeof callback === 'function') {
            callback();
        }
    } catch (error) {
        console.error("콜백 실행 중 오류:", error);
    }
}

// 사용
safeCallback(() => {
    throw new Error("테스트 에러");
});

---

마무리

콜백 함수는 JavaScript의 핵심 개념 중 하나로, 비동기 처리와 이벤트 기반 프로그래밍의 기초가 됩니다.

콜백 함수를 이해하면 JavaScript의 비동기 처리와 이벤트 기반 프로그래밍을 자유자재로 다룰 수 있습니다!