콜백 함수(Callback Function)는 뭘까? Please Call Me

콜백 함수(Callback Function)는 뭘까? Please Call Me

 

자바스크립트를 학습하다 보면, 콜백 함수(Callback Function)라는 말을 자주 듣게 됩니다. 영어 단어 자체는 쉬워보이는데 한국말에는 없는 단어라 왠지 낯설고 어렵게만 느껴지기도 합니다. 하지만 왜 영화에서 자주 보던 제스처 있죠? 나중에 나한테  전화줘~! 일단 딱 이런 이미지로 콜백 함수를 기억하면 좋을 것 같습니다.

 

 

Please Call Me Back

Callback 해주고 싶게 만드는 미소

 

콜백 함수는 함수를 인자(argument)로 받아들여서 다른 함수의 실행 결과를 나중에 처리하는 것입니다. 그냥 어떤 함수를 사용하는데, 인자(argument, parameter)로 함수가 떡하니 들어가 있는 걸 말합니다. 별거 아닙니다. 말만 어려워요.

 

 

 

콜백 함수는 비동기 처리가 특징

 

콜백 함수는 보통 비동기(asynchronous) 방식의 처리에서 많이 사용됩니다. 예를 들어, 어떤 작업이 완료될 때까지 기다리지 않고, 다른 작업을 수행하다가 작업이 완료되면 콜백 함수를 호출하여 결과를 처리하는 것입니다. 이런 비동기 동작방식이 Javascript라는 프로그래밍 언어의 큰 특징이기도 합니다.

콜백 함수는 보통 익명 함수(anonymous function)로 사용됩니다. 함수에 이름이 없다는 말이죠. 혹은 그때 그때 한번만 대충 사용할 것이기 때문에 굳이 함수의 이름을 고민해서 작성할 필요가 없을 때 이름 없이 그냥 사용하게 되는 겁니다.

이제 콜백 함수의 간단한 사용 예제를 살펴봅시다.

function add(a, b, callback) {    // ② a, b, callback 자리에 3, 5, display가 전달됨
  let result = a + b;             // ③ 3 + 5의 결과를 result 변수에 저장
  callback(result);               // ④ callback(result)는 display(8)이 되면서 display()함수를 호출
}

function display(result) {        // ⑤ display(8)로 호출됨
  console.log("Result: " + result); // ⑥ console.lgo(Result: " + 8); 이 실행됨
}

add(3, 5, display);  // ① add() 함수를 호출, 인자로 3, 5, display를 전달

 

위 예제에서 add 함수는 a와 b를 더한 결과를 callback 함수에게 전달합니다.(함수를 인자로 받기에, 그냥 이름도 콜백으로 그냥 사용해본 것입니다.) 이 때, callback 함수는 display 함수로 설정되어 있으며, result를 출력하는 역할을 합니다.

 

어차피 코드는 한줄씩 실행이 되는 거니까, 제가 붙여 놓은 숫자를 따라 찬찬히 따라가보시기 바랍니다.

 

뭔가 함수끼리 서로 물고 물리는 그런 느낌이 들죠? 대충 막 이런 느낌?

우로보스(Urobos의 뱀)

 

실행 결과는 다음과 같습니다.

결과 8은 어떻게 나왔게요?

 

 

콜백함수에 대해 처음에는 단번에 이해하는 게 어렵고, 조금 복잡하게 느껴질 수도 있습니다.

핵심은, add 함수는 a와 b를 더한 결과를 callback 함수에게 전달한다는 것입니다. add 함수가 호출될 때 display 함수가 callback 인자로 전달되며, add 함수는 result 값을 callback 함수에게 전달합니다. display 함수는 이 값을 출력하는 역할을 수행합니다.

 

callback 함수가 이렇게 말하고 있는 거죠,

'add 함수야 결과 나오면 나한테 알려줘~~ 나한테 Call back 해줘~~ 브로'

Callback에 아주 기뻐하는 Bro.

자바스크립트는 이 따위 콜백 함수 동작방식을 왜 사용하는 걸까요? 머리 복잡한데 이렇게 쓰는 이유는 다~ 이유가 있겠죠? 가장 간단한 장점으로는 앞에서도 언급했지만, 비동기적 동작방식의 장점으로 인해서 그렇습니다.

 

할 일이 쌓여 있는데, 무조건 일 들어오는 순서대로 처리한다고 가정해보세요. 어떤 일은 10분만에 끝낼 수 있는데, 10시간 걸리는 일이 먼저 들어와서 무조건 그걸 먼저 처리한다고 생각해보세요. 상당히 비효율적일 겁니다.

 

비동기방식으로 동작하는 프로그램 언어들은 이런 경우, 오래 걸리는 작업을 슬쩍 밀어두고 후다닥 빨리 끝낼 수 있는 일들을 먼저 처리하게 되거든요. 그게 효율적이라고 보는 거죠. 바로 그럴 때 이런 콜백함수 형식을 사용하게 되는 겁니다. 오래 걸리는 일은 A에게 시켜 놓고, B는 다른 일을 후다닥 처리한 후 A가 알려주기를 기다리는 방식이죠.

 

그래서 콜백 함수를 사용하는 것 뿐입니다. 말만 어려워 보이고, 동작 방식이 한번 더 꼬여 있는 것 처럼 보일 뿐입니다.

알고 보면 간단해요. 별거 아닙니다.

 

 

콜백 함수는 왜 만들어졌을까?

 

Javascript 언어는 인터넷 통신환경에서 동작하는 브라우저와 대화를 하기 위해서 태어났습니다. 인터넷 통신환경이라는 것은 통신이 느릴 수도 있고, 통신에 실패할 수도 있습니다. 그런 케이스가 존재할 수 밖에 없다는 것이죠. 따라서, 애초에 비동기를 염두에 두고 동작하도록 설계가될 수 밖에 없었을 겁니다.

 

예를 들어, 웹 페이지에서 버튼을 클릭할 때마다 서버에 데이터를 요청하고, 해당 데이터를 받아와서 처리해야 한다고 가정해봅시다. 이 때, 서버로부터 데이터를 받아오는 요청은 시간이 걸릴 수 있으므로, 이를 비동기적으로 처리해야 합니다. 이럴 때 유용하게 사용하라고 콜백 함수가 존재하는 것입니다.

// 버튼을 클릭했을 때 실행되는 함수
function handleClick() {       // ① 버튼이 클릭되면, handleCkick() 함수가 호출되어 실행을 시작
  fetchData(function(data) {   // ② fetchData() 함수가 호출되는데, 인자로 function(data)가 들어감.
    // 받아온 데이터를 처리     // ⑤ function(data) → function({ name: "Kincoding", age: 30 })
    console.log(data);        // ⑥ { name: "Kincoding", age: 30 } 출력
  });
}

// 서버에서 데이터를 받아오는 함수
function fetchData(callback) {  //③ fetchData(callback) → fetchData((function(data))
  // 서버에 데이터를 요청하는 비동기적인 코드
  // 요청이 성공하면, 받아온 데이터를 콜백 함수에 전달
  const data = { name: "Kincoding", age: 30 }; //요렇게 데이터를 받으면,
  callback(data);  // ④ callback(data) → function({ name: "Kincoding", age: 30 })

 

handleClick 함수는 버튼을 클릭했을 때 실행되는 함수입니다. 이 함수에서는 fetchData 함수를 호출하고, 이 함수에서 받아온 데이터를 처리합니다. fetchData 함수는 콜백 함수를 인자로 받아들여서, 데이터를 받아온 후에 이 콜백 함수를 실행합니다. 이를 통해, 데이터가 받아와지기 전에 다음 코드가 실행되지 않고, 데이터를 받아온 후에만 코드가 실행되도록 하고 있습니다.

 

 

 

마치며

콜백 함수를 이용하여 비동기적인 처리를 구현하는 것은 일반적인 웹 개발에서 매우 중요한 역할을 합니다. 서버와의 통신이나 파일 입출력 등의 작업에서는 비동기적인 처리가 필수적이기 때문에, 이를 효과적으로 구현하기 위해서는 콜백 함수의 개념을 잘 이해하고 활용해야 합니다.

 

노랫말 외우듯 코드를 찬찬히 반복적으로 들여다보면서 고민을 거듭해봅시다. 릴레이 전화연결 같은 방식을 코드라는 형식을 빌어서 표현하다보니 어렵게, 혹은 골 때리게 느껴지는 것이 당연합니다. 하지만!

 

익숙해지면, 보는 눈이 생기고 하는 능력이 생기면서 다 쉬워진다는 것이죠! 

오늘은 약간 머리 아플 수도 있는 주제로 포스팅을 정리해보았습니다.

 

즐거운 코딩 생활, 즐코딩.

KINcoding.com

 

 

https://app.kincoding.com 

WANTED MBTI