[JS] CallBack(콜백함수)

CallBack 콜백함수란

CallBack 함수란 이름 그대로 나중에 호출되는 함수를 말한다.

콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다.

콜백함수도 일반적인 자바스크립트 함수일 뿐이다.

콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록 하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

즉 콜백함수는 콜백함수라는 유니크한 문법적 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다.

즉, 콜백 함수란

1. 다른 함수의 인자로서 이용되는 함수.
2. 어떤 이벤트에 의해 호출되어지는 함수.

 

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

1. 사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.

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

 

1. 네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.

따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

 

1. 파일을 읽고 쓰는 등의 파일 시스템 작업
2. 의도적으로 시간 지연을 사용하는 기능(알람 등)

위와 같이 이벤트 등을 기다리는데 하나뿐인 소중한 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 소중한 스레드를 사용한다면…

사용자는 멈춰져 있는 화면을 보게되는 것이다.

위와 같이 스레드의 블로킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.

 

콜백함수가 필요한 이유?

 

콜백함수의 이유에 대해 설명을 할 때

변수의 유효범위(scope)에 대한 이야기도 하고 동기/비동기(Synchronous/Asynchronous) 처리에 대한 이야기도 하면 좋을 것이다.

처음에는 그냥 간단하게, 콜백함수가 필요한 이유를 찾기보다는

함수를 활용하는 하나의 방식으로 이해해두는 것이 좋다.

콜백함수는 그냥 방금 위에서 본 동작을 구현하기 위해서 필요했다.

여러 함수들을 선언하고, 어느 한 함수가 실행될 때,

상황에 따라 필요한 다른 함수를 실행하고 싶을 때 활용할 수 있다.

 

결과는 같지만, 함수를 호출하는 시점이나 동작하는 순서가 조금씩 달라진다.

이렇듯 콜백함수를 처음 접할 때는 어떤 특수한 필요에 의해 작성되어지는 개념 보다는

그저 코드를 작성할 때 다양하게 활용되어지는 함수의 표현방식중 하나라고 이해하는 것이

더 좋지 않을까 라는 생각을 해 봤다.

콜백함수(Callback Function) 사용 원칙

 

 

콜백지옥 (Callback Hell)

비동기 호출이 자주 일어나는 프로그램의 경우 '콜백 지옥'이 발생한다.

함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

 

Promise 는 정상 수행 후 resolve, 실패 후 reject 가 실행된다.

callback을 사용했던 것과 마찬가지로 resolve에 값을 담아 전달한다.

 

하지만, 이 패턴도 그리 좋은 방법은 아니다. 결국 콜백지옥처럼 들여쓰기 수준을 감당하기 힘들어진다.

 

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

 

MDN 에서 정의하고 있는 Promise에 대한 설명이다.

프로미스는 비동기 호출 시, 마치 동기 호출 처럼 값을 반환할 수 있다는 문구에 집중해보자.

즉, resolve를 통해 전달 받은 값을 반환하여 사용해야 한다!