콜백함수 사용 목적, 예시

요즘 타입스크립트 공부하다 궁금한 개념이 있으면 ChatGPT 에 바로 물어본다. 

 

콜백함수에 대해 물어봤더니, 비동기 처리와 관련된 작업에서도 자주 사용한다고 답해준다. 화면 띄울 때 주요 윤곽선 같은 것들만 먼저 띄우고, DB 에서 쿼리를 통해 데이터를 불러오거나 연산 등의 작업은 나중에 하도록 하면 좋을 것 같다. 

 

콜백함수의 쉬운 예시를 보여달라고 하니, 다음과 같은 예시를 보여준다. 

function printResult(result: number) {
  console.log('Result is ' + result);
}

function add(a: number, b: number, callback: (result: number) => void) {
  const result = a + b;
  callback(result);
}

add(2, 3, printResult);
// 출력결과: Result is 5

아래와 같이 설명을 한다. (NOTE: 노란색 형광 하이라이트는 ChatGPT 의 답변)

 

위의 코드에서는 add 함수가 두 개의 숫자를 더한 결과를 콜백함수로 전달합니다. printResult 함수는 콜백함수로 전달되어, add 함수가 더한 결과를 출력합니다. 

 

add 함수의 세 번째 매개변수는 콜백함수로, 이 함수는 result 매개변수를 받아 출력하는 printResult 함수와 같은 형태를 가지고 있습니다. 

 

add 함수를 호출할 때, 첫 번째와 두 번째 매개변수로 숫자 2와 3을 전달하고, 세 번째 매개변수로 printResult 함수를 전달합니다. add 함수에서는 숫자 2와 3을 더한 결과를 result 변수에 저장하고, 이 값을 callback 함수에 전달하여 실행합니다. printResult 함수는 result 값을 받아 출력합니다. 

 

=> add 함수에서 2 와 3을 더한 값을 "result" 에 저장하고 이 결과를 callback 함수에 보내는데, 그 콜백함수가, add 의 세 번째 매개변수인 "callback" 함수니까, printResult 함수가 그 값을 받아서 실행한다는 뜻이구나. 

 

이렇게 콜백함수를 사용하면 비동기적으로 실행되는 작업에서 결과를 처리할 수 있습니다. 이 예시에서는 간단한 계산 작업이지만, 네트워크 요청이나 파일 처리 등에서 콜백함수를 사용하여 결과를 처리하는 것이 일반적입니다.

 

=> [ ] DB 에서 데이터를 받고 계산하거나 하는 등의 예시를 추후에 만들어봐야겠다. AWS 에서 Node.js + JavaScript 를 사용할 일이 있으면 사용해봐야지. 

 

Q. 콜백함수 개념은 무엇이니?

 

콜백함수는 다른 함수의 인자로 전달되어, 필요한 시점에 호출되는 함수를 말합니다. 즉, 콜백함수는 호출되지 않은 상태에서 다른 함수에 의해 "부르는" 함수입니다. 이러한 특징 때문에, 콜백함수는 비동기적인 작업에서 많이 사용됩니다. 예를 들어, 자바스크립트에서는 setTimeout 함수를 사용하여 지정된 시간이 경과한 후에 콜백함수를 호출할 수 있습니다.

setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

위의 코드에서는, setTimeout 함수를 호출할 때 첫 번째 인자로 콜백함수를 전달하고, 두 번째 인자로 1000을 전달하여 1초 후에 콜백함수를 호출하도록 설정합니다. 이렇게 하면, 1초 후에 "Hello, world!" 메시지가 콘솔에 출력됩니다.

 

=> 콜백함수 개념을 공부하고 나서, 다시 setTimeout 함수를 보니, 매개변수가 두 개라는 사실이 보인다!

그리고, "인자" 가 parameter 라는 걸 배웠다...!