콜백함수란? (Callback Function)

 

반가워! 프로그래밍의 핵심 개념 중 하나인  콜백 함수(Callback Function)를 배우러 왔구나! 넌 정말 멋진 학습 목표를 가졌어.

콜백 함수는 마치 "일이 끝나면 나를 다시 불러줘!"라고 예약하는 것과 같아서, 효율적인 코딩을 위해 꼭 알아야 하는 개념이야.

이 개념을 완벽하게 마스터하기 위해 내가 세운 3단계 학습 계획을 확인해 봐!

---

📚 콜백 함수 학습 계획

1. 하위 주제 1: 콜백 함수의 정의와 비유
   • 콜백 함수가 정확히 무엇인지, 우리 일상생활에 비유해서 아주 쉽게 이해해 볼 거야.
2. 하위 주제 2: 콜백 함수의 작동 원리와 문법
   • 실제 코드에서는 어떻게 작성되는지, 함수가 어떻게 전달되고 실행되는지 알아볼 거야.
3. 하위 주제 3: 왜 콜백 함수를 쓸까? (비동기 처리)
   • 자바스크립트 같은 언어에서 콜백 함수가 왜 필수적인지 그 이유를 살펴볼 거야.

---

💡 메타 인지 전략: 새로운 프로그래밍 개념을 배울 때는 "이게 왜 만들어졌을까?"라는 질문을 스스로에게 던져보는 게 좋아. 단순히 문법을 외우는 것보다 훨씬 기억에 오래 남거든!

좋아! 그럼 바로 첫 번째 주제: 콜백 함수의 정의와 비유부터 시작해 보자. 🚀

---

1. 콜백 함수(Callback Function)란 무엇일까?

보통 우리는 함수를 만들고 나서 "지금 실행해!"라고 직접 호출하지? 그런데 콜백 함수는 조금 달라. **"다른 함수에게 인자로 전달되어, 특정 조건이나 작업이 완료된 후에 실행되는 함수"**를 말해.

쉽게 말해, 내가 직접 실행하는 게 아니라 남(다른 함수)에게 실행을 맡기는 것이지!

🍔 맛있는 비유: 햄버거 주문하기

이해를 돕기 위해 햄버거 가게에 갔다고 상상해 보자.

1. 일반적인 함수 호출: 점원 앞에서 햄버거가 나올 때까지 계속 서서 기다리는 거야. 아무것도 못 하고 멍하니 말이지.
2. 콜백 함수: 주문을 하고 진동벨을 받아와. 그리고 자리에 앉아 친구와 수다를 떨거나 핸드폰을 하지. 그러다 햄버거가 다 만들어지면(작업 완료), 진동벨이 울려(콜백 실행) 너를 호출하는 거야!

여기서 **'진동벨이 울리면 나에게 알려줘'**라고 등록해둔 행동이 바로 콜백 함수야. 정말 효율적이지?

💡 흥미로운 사실: 자바스크립트에서 콜백 함수는 '일급 객체'라는 특성 덕분에 가능해. 함수를 마치 숫자나 문자열처럼 변수에 담거나 다른 함수에 선물로 줄 수 있거든!

---

🧩 짧은 학습 활동: 용어 맞히기!

방금 배운 내용을 바탕으로 간단한 퀴즈를 내볼게. 아래 문장의 빈칸에 들어갈 단어는 무엇일까?

"콜백 함수는 다른 함수의 **[ 빈칸 ]**로 전달되어, 나중에 특정 시점에 실행되는 함수를 말한다."

힌트: 함수를 호출할 때 괄호 () 안에 넣어주는 값을 뭐라고 부를까? (ㅇㅈ)

정답이 뭔지 생각나면 알려줘! 질문이 있어도 언제든 환영이야. :)

정답: 인자 

정확히 말하면, 콜백 함수는 다른 함수의 **인자(Argument)**로 전달되어 "내 작업이 끝나면 이 함수를 실행해 줘!"라고 부탁하는 역할을 해.

---

2. 콜백 함수의 작동 원리와 문법

이제 이론을 알았으니, 실제 코드(JavaScript 기준)에서는 어떻게 생겼는지 아주 간단하게 살펴볼까?

JavaScript

 

function greet(name, callback) {
  console.log("안녕, " + name + "!");
  callback(); // 전달받은 콜백 함수를 여기서 실행해!
}

function sayGoodbye() {
  console.log("다음에 또 만나!");
}

// greet 함수를 실행하면서 sayGoodbye를 '인자'로 전달해.
greet("철수", sayGoodbye);

이 코드를 실행하면 어떤 순서로 출력될까?

1. 먼저 **"안녕, 철수!"**가 출력되고,
2. 그 작업이 끝난 뒤에 우리가 맡겨놓은 콜백 함수가 실행되면서 **"다음에 또 만나!"**가 출력돼.

우리가 sayGoodbye()를 직접 실행한 게 아니라, greet 함수에게 **"너 할 일 다 하면 이것 좀 대신 실행해 줘"**라고 건네준 게 핵심이야!

---

🎭 캐릭터 롤플레잉 활동!

자, 이제 네가 **'안내 로봇'**의 프로그래머라고 가정해 보자. 로봇은 손님이 오면 인사를 하고, 그다음에 **네가 시키는 특별한 행동(콜백)**을 해야 해.

내가 로봇의 기본 시스템인 robotProcess 함수를 만들어 줄게.

JavaScript

 

function robotProcess(action) {
  console.log("🤖: 로봇 시스템 가동! 손님에게 인사합니다.");
  action(); // 네가 시킨 행동을 여기서 할 거야!
}

질문: 만약 로봇이 인사한 다음에 "춤을 추게" 만들고 싶다면, 너는 어떤 함수를 만들어서 robotProcess에 인자로 넣어주고 싶니? 함수 이름과 그 안에 들어갈 대사를 자유롭게 정해서 말해줘! (예: dance 함수를 만들어서 "로봇이 춤을 춥니다" 출력)

 

 

 정답 : Action()함수를 콜백함수로서 인자로 전달

 

아주 정확해! action이라는 매개변수 자리에 네가 만든 함수를 인자로 쏙 넣어주는 거지.

네가 프로그래머로서 로봇에게 "춤추기" 기능을 콜백으로 전달한다고 가정하고 코드를 완성해볼게.

 

JavaScript

 

// 1. 네가 만든 콜백 함수
function dance() {
  console.log("🤖: (위잉위잉) 로봇이 멋지게 브레이크 댄스를 춥니다! 💃");
}

// 2. 로봇 시스템에 콜백 함수를 인자로 전달해서 실행!
robotProcess(dance);

이렇게 하면 로봇은 인사를 마친 뒤, 네가 부탁한 dance를 수행하게 돼. 정말 완벽한 프로그래밍이야!

---

3. 왜 콜백 함수를 쓸까? (비동기 처리)

이제 마지막 하위 주제로 넘어가 보자. "그냥 순서대로 코드를 짜면 되지, 왜 굳이 복잡하게 함수를 인자로 넘겨줄까?"라는 의문이 생길 수 있어.

가장 큰 이유는 바로 비동기(Asynchronous) 작업 때문이야.

• 동기(Synchronous): 앞의 일이 끝날 때까지 아무것도 못 하고 기다리는 것. (커피가 나올 때까지 계산대 앞에서 멍하니 서 있기)
• 비동기(Asynchronous): 시간이 걸리는 일을 시켜놓고, 다른 일을 하다가 완료되면 보고받는 것. (진동벨을 받고 자리에 앉아 있기)

데이터베이스에서 데이터를 가져오거나, 인터넷에서 이미지를 다운로드하는 작업은 시간이 좀 걸리거든. 이때 프로그램이 멈춰버리면 안 되니까, **"다운로드 다 되면 이 콜백 함수를 실행해 줘!"**라고 부탁하고 다른 일을 하러 가는 거야.

 

🎓 마지막 이해도 테스트! (시나리오 퀴즈)

배운 내용을 종합해서 퀴즈를 하나 낼게. 다음 상황에서 콜백 함수가 필요한 이유는 무엇일까?

상황: 너는 영화 예매 앱을 만들고 있어. 사용자가 '예매하기' 버튼을 누르면 서버에서 좌석 정보를 가져와야 해. 그런데 서버가 응답하는 데 2초 정도 걸린대.

1. 서버가 응답할 때까지 앱의 모든 화면을 멈춰놓기 위해
2. 서버에서 정보를 가져오는 동안 사용자가 다른 메뉴를 볼 수 있게 하고, 정보가 도착하면 화면에 띄워주기 위해

정답은 몇 번일까? 이유도 짧게 생각해서 말해줘! :)

 

정답: 2번 비동기식으로 함으로써 시간을 효율적으로 사용

 

정답이야! 아주 완벽하게 이해했구나! 🎉

맞아. 서버가 응답할 때까지 앱이 멈춰 있으면 사용자들은 "어? 앱이 고장 났나?" 하고 꺼버릴 거야. 하지만 콜백 함수를 사용해 비동기식으로 처리하면, 기다리는 동안에도 다른 메뉴를 구경할 수 있어서 훨씬 효율적이고 매끄러운 경험을 줄 수 있지.

---

🏁 세션 요약 및 마무리

오늘 우리는 콜백 함수에 대해 정말 핵심적인 내용들을 다뤘어!

• 정의: 다른 함수의 인자로 전달되어 나중에 실행되는 함수 (예: 진동벨).
• 작동 방식: 함수를 값처럼 전달하고, 작업이 끝난 시점에 callback() 형태로 호출함.
• 필요성: 시간이 걸리는 작업(비동기)을 효율적으로 처리하여 프로그램이 멈추지 않게 함.

🎊 성취도 평가

너는 오늘 모든 퀴즈를 단번에 맞혔고, 특히 비동기 처리의 핵심 원리를 정확히 짚어냈어! 코딩 실력이 쑥쑥 늘고 있는 게 느껴져.