Callback

내승현·2022년 4월 24일
0

CallBack 콜백함수란

CallBack 함수란 이름 그대로 나중에 호출되는 함수를 말한다.
콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다.
콜백함수도 일반적인 자바스크립트 함수일 뿐이다.
콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
즉 콜백함수는 콜백함수라는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다.

대표적인 콜백 함수의 사용 예로는 자바스크립트에서 이벤트 핸들러 처리이다.


<button id="button1" onclick="button1_click();">버튼1</button>
<script>
function button1_click() {
	alert("버튼1을 누르셨습니다.");
}
</script>

Html에 onclick에 button1_click함수는 브라우저의 javascript API에서 DOM 이벤트 핸들러에 전달(등록)되고, 해당 버튼에 클릭이벤트가 발생했을 이벤트 핸들러가 콜백함수를 호출한다.

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

Callback을 활용한 비동기적 프로그래밍

Callback 함수를 사용하는 이유는, 자바스크립트에서 비동기적 프로그래밍을 할수 있기 때문이다.
이 콜백함수기법은 자바스크립트에서 가장 오래된 비동기적 메커니즘이라고 한다.

비동기적 테크닉 : 소중한 싱글스레드의 멈춤을 방지한다. 즉 블록킹을 방지하여 싱글스레드가 논블록킹으로 동작하게 한다.

비동기적 프로그래밍이 필요한 이유는 다음과 같다.

비동기적 테크닉을 사용하는 경우

1.사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.
따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.

2.네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

3.파일을 읽고 쓰는 등의 파일 시스템 작업

4.의도적으로 시간 지연을 사용하는 기능(알람 등)

위와 같이 이벤트 등을 기다리는데 하나뿐인 소중한 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 소중한 스레드를 사용한다면…
사용자는 멈춰져 있는 화면을 보게되는 것이다.
위와 같이 스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.


Callback 함수의 비동기적 사용의 예

콜백 함수는 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용한다.
드물게는 배열에 넣어서 쓸 때도 있다.
항상 그런건 아니지만 보통의 콜백함수는 익명함수로 사용한다.

중요한 점은 콜백함수는 그냥 일반적인 함수이다.
우리는 비동기적 프로그래밍을 하기 위해서는, 비동기적으로 콜백함수를 호출하는 함수에게 비동기적으로 호출되기를 원하는 코드를 콜백함수에 담아서 전달해야 한다.

function fn_fakeAsync(callback){
  calback();
}
console.log("------- fn_fakeAsync 호출 직전 -------");

fn_fakeAsync(function(){
  console.log("이게 비동기적으로 동작하길 바래");
});

console.log("------- fn_fakeAsync 호출 이후 -------");

위 코드 결과

------- fn_fakeAsync 호출 직전 -------
이게 비동기적으로 동작하길 바래
------- fn_fakeAsync 호출 이후 ------

위처럼 단순히 아무 함수에게나 콜백함수를 전달하여 호출시키는 것으로는 비동기적으로 콜백함수를 호출 할수 없다.

다시한번 말하지만 자바스크립트에서 비동기프로그래밍을 하려면 비동기적으로 콜백함수를 호출하는 함수비동기적으로 호출되기를 원하는 콜백함수가 필요하다.
ex) setTimeout , setInterval, clearInterval 등등

profile
아토언니의 성장기 ,,

0개의 댓글