callback 함수라는 얘기를 많이 들어보셨을 겁니다. callback은 프로그래밍에서 뺴놓을 수 없는 아주 중요한 개념입니다.
callback의 의미는 크게 2가지가 있습니다.
- 다른 함수의 인자로 이용되는 함수.
- 이벤트에 의해 호출되어지는 함수.
그럼 어떤 상황인지 하나씩 살펴보도록 하겠습니다.
다른 함수의 인자로 이용되는 함수
여기까지 학습하신 분들은 이제 인자가 어떤 의미인지 아실 것 같습니다.
function add (x, y) () {
return x + y
}위에 add 함수에서는 인자로 x, y가 들어갑니다. 보통 저희가 인자로 넣게 되는 것들은 문자열, 숫자열, 배열, 객체 등의 데이터 입니다.
하지만 놀랍게도 인자에는 "함수"도 들어갈 수 있습니다.
한 번 예제를 통해 보도록 하겠습니다.
function add (x, y, callback){
let result = x * y
callback(result)
}
function result (data) {
console.log(data, "콜백함수 실행")
}
add(5, 10, result)위의 코드를 한 번 살펴봅시다.
add 함수에는 인자로 x, y, callback이 들어가고, callback에는 "함수"가 들어갑니다.
그리고 add 함수를 실행시키면 add 함수 안에서 인자로 들어간 다른 함수가 실행됩니다.
이럴 때 add 함수의 인자로 사용된 result 함수를 callback 함수라고 부릅니다.
이벤트에 의해 호출되어지는 함수
이벤트라고 하면 어떤 것이 가장 먼저 떠오르나요? 이미 여러분들이 많이 사용하고 있는 onClick, onChange 들이 이벤트입니다.
onClick, onChange는 html에서 미리 만들어 놓은 함수입니다. 우리는 보통 onClick을 아래처럼 사용하게 됩니다.
<button onClick={handleClickFunction}></button>위의 모습을 보면 button을 클릭하면 onClick함수가 실행이되고, onClick에서는 다시 handleClickFunction을 실행하게 됩니다.
위에서 얘기했듯이 함수의 인자로 handleClickFunction이 들어가기 때문에 handleClickFunction을 callback 함수라고 부를 수 있습니다.
이런 상황에서 우리는 "handleClickFunction을 호출한다", 호출된다 라고도 합니다.
이러한 callback 함수는 2가지로 다시 나눌 수 있습니다.
- 동기적 함수
- 비동기적 함수
자바스크립트는 Single-Thread / Non-Blocking 방식으로 코드를 실행합니다. (Single-Thread, Non-Blocking에 대해서는 여기서 자세하게 다루지 않습니다. 해당 개념은 Event-Loop도 함께 들어갑니다. )
간단하게 이야기 하면, 자바스크립트는 한 번에 하나의 코드만 실행할 수 있습니다. (Single-Thread) 하지만 코드를 실행하고 해당 결과를 기다리지 않고 다음 코드를 실행합니다. (Non-Blocking)
동기적 callback 함수는 아래 Promise, async/await에서 다루도록 하겠습니다. 지금은 비동기적 함수만 간단한 함수로 봅시다.
비동기적 callback
비동기적 callback 함수의 가장 좋은 예시는 setTimeout입니다.
비동기적 함수는 결과를 기다리지 않고 다음 코드를 실행하는 과정을 이야기 합니다.
function Test () {
console.log("3초 기다리기")
}
setTimeout(Test,3000);
console.log('이건 바로 실행')위의 코드를 한 번 console 창에서 실행시켜 보세요. 결과가 어떻게 나오나요?
아래처럼 결과가 나옵니다.
"이건 바로 실행"
"3초 기다리기"분명 setTimeout을 먼저 실행시켰지만, 아래있는 console.log()가 먼저 결과창에 보입니다. 이러한 이유는 자바스크립트 코드가 비동기적으로 코드를 실행시키기 때문입니다.
