[JavaScript] 콜백 함수(Callback Function)

📚 콜백 함수란 무엇인가요?

콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수예요. 이는 특히 비동기 작업을 처리할 때 중요한 역할을 해요. 콜백 함수는 어떤 이벤트가 발생하거나 특정 작업이 완료된 후 실행되도록 설계되었어요.

 

당신이 친구에게 어떤 일이 끝나면 전화해 달라고 부탁한다고 상상해 보세요. 여기서 당신의 부탁은 '메인 함수'이고, 친구가 나중에 전화하는 행위는 '콜백 함수'에요. 이렇게 특정 작업(일이 끝나는 것)이 완료된 후에 실행되도록 예약된 추가 작업(전화하는 것)이 바로 콜백 함수의 개념이에요.

 

---

🖥️ 콜백 함수의 사용

콜백 함수는 자바스크립트에서 널리 사용되며, 특히 이벤트 리스너, 타이머 함수, 비동기 요청 처리 등에서 중요한 역할을 해요.

1. 이벤트 리스너

• 웹 페이지에서 사용자의 특정 행동(예: 클릭, 키보드 입력)에 반응하여 함수를 실행할 때 콜백 함수를 사용해요.

document.getElementById('myButton').addEventListener('click', function() {
    console.log('버튼이 클릭되었습니다.');
});

• document.getElementById('myButton')은 웹 페이지에서 'myButton'이라는 ID를 가진 요소를 찾는 함수입니다.
• .addEventListener('click', function() {...})는 해당 요소에 클릭 이벤트 리스너를 추가하는 메서드입니다. 이 메서드는 'click' 이벤트와 콜백 함수를 인자로 받습니다.
• function() { console.log('버튼이 클릭되었습니다.'); }는 콜백 함수로, 버튼이 클릭될 때 실행됩니다. 이 함수는 클릭 이벤트가 발생하면 콘솔에 "버튼이 클릭되었습니다."라는 메시지를 출력합니다.

2. 타이머 함수

• setTimeout과 setInterval과 같은 타이머 함수에서 지정된 시간이 지난 후 함수를 실행할 때 콜백 함수를 사용해요.

function showMessage() {
  console.log("안녕하세요!");
}

// 3초 후에 showMessage 함수를 호출
setTimeout(showMessage, 3000);

• showMessage 함수는 간단한 메시지를 콘솔에 출력하는 함수입니다.
• setTimeout 함수는 첫 번째 인자로 showMessage 함수(콜백 함수)를, 두 번째 인자로 지연 시간(3000밀리초, 즉 3초)을 받습니다.
• 3초 후 setTimeout은 showMessage 함수를 호출하고, "안녕하세요!"가 콘솔에 출력됩니다.

3. 비동기 요청

• 서버로부터 데이터를 요청하고 응답을 받았을 때 실행할 작업을 정의하는 데 콜백 함수를 사용해요.

fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

• fetch('[https://example.com/data'):](https://example.com/data'): URL로부터 데이터를 비동기적으로 요청합니다.
• .then(response => response.json()): 서버로부터 받은 응답을 JSON 형태로 변환합니다. 이는 첫 번째 콜백 함수입니다.
• .then(data => console.log(data)): 변환된 JSON 데이터를 콘솔에 출력합니다. 이는 두 번째 콜백 함수입니다.

then은 fetch의 직접적인 콜백 함수가 아니라, fetch에 의해 반환된 Promise 객체에 연결된 콜백 함수예요.

 

---

🤔 콜백 지옥과 그 해결 방법

콜백 함수의 과도한 중첩 사용은 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만드는 '콜백 지옥'을 야기할 수 있어요. 이를 해결하기 위해 Promise나 async/await과 같은 현대적인 자바스크립트 기능을 사용할 수 있어요.

1. 콜백 지옥 예시

getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
             getMoreData(c, function(d){ 
                 getMoreData(d, function(e){ 
                    // ...
                 });
             });
        });
    });
});

2. Promise를 사용한 해결 방법

• Promise는 콜백 지옥을 해결하는 데 유용해요. Promise는 비동기 작업을 순차적으로 연결할 수 있게 해 주어 코드를 더 깔끔하게 만들 수 있어요.

getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => getMoreData(c))
    .then(d => getMoreData(d))
    .then(e => {
        // ...
    })
    .catch(error => console.log(error));

3. async/await를 사용한 해결 방법

• async/await는 Promise를 더욱 간결하게 사용할 수 있게 해주는 ES8의 기능이에요. async 함수 내에서 await 키워드를 사용하면 비동기 작업을 동기적인 방식으로 작성할 수 있어요.

async function asyncFunction() {
    try {
        const a = await getData();
        const b = await getMoreData(a);
        const c = await getMoreData(b);
        const d = await getMoreData(c);
        const e = await getMoreData(d);
        // ...
    } catch (error) {
        console.log(error);
    }
}

 

---

🚨 주의할 점

콜백 함수를 사용할 때는 중첩으로 인한 복잡성(콜백 지옥)을 피하고, 비동기 작업에서 발생할 수 있는 오류를 적절히 처리하는 것이 중요해요. 또한, 함수의 실행 컨텍스트와 `this` 바인딩에 주의하고, 비동기 작업에서 콜백 함수의 실행 순서를 정확히 이해하는 것도 필수적이에요. 이러한 주의 사항을 염두에 두면 콜백 함수를 보다 효과적으로 사용할 수 있어요.

 

---

📖 결론

콜백 함수는 자바스크립트의 핵심적인 부분으로, 특히 비동기 프로그래밍에서 중요한 역할을 해요. 이를 통해 개발자는 특정 작업이 완료된 후에 추가 작업을 수행할 수 있으며, 이벤트 처리, 타이머 설정, 서버 요청 등 다양한 상황에서 유연하게 코드를 구성할 수 있어요.

그러나 콜백 함수의 과도한 사용은 코드의 복잡성을 증가시키고, '콜백 지옥'으로 알려진 유지보수의 어려움을 초래할 수 있어요. 이를 해결하기 위해 현대 자바스크립트는 Promise와 async/await과 같은 패턴을 제공해요.

콜백 함수를 사용할 때는 함수의 실행 컨텍스트와 this 바인딩을 주의 깊게 고려해야 하며, 비동기 작업에서 발생할 수 있는 예외 상황을 적절히 처리하는 것이 중요해요.

결론적으로, 콜백 함수는 그 사용법을 정확히 이해하고 적절히 활용하는 것이 중요해요. 이를 통해 더욱 효율적이고 유지보수가 용이한 코드를 작성할 수 있어요.

 

---

🔗 추가 정보

• 자바스크립트의 콜백 함수에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.