Callback / Promise

이동현·2023년 3월 30일

코드 캠프 블로그

목록 보기

17/50

1. Callback 함수

1) Callback 이란?

다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말한다.
다시 말해 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
파라미터로 함수를 전달받아, 함수의 내부에서 실행된다.

2) 콜백함수 (Callback Function) 사용 이유

자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다.
자바스크립트는 싱글스레드를 사용하는데, 멈춤을 방지해준다. 즉 블록킹을 방지하여 싱글스레드가 논블록킹으로 동작하게 한다.
💡 싱글스레드
⇒ 싱글스레드는 한 번에 하나의 작업만 수행할 수 있다.

💡 싱글스레드로 어떻게 비동기 작업이 가능할까?
자바스크립트의 메인스레드인 이벤트 루프가 싱글스레드이기 때문에 자바스크립트를 싱글스레드 언어라고 부른다.
그러나 자바스크립트는 이벤트 루프만 독립적으로 실행하지는 않고, 웹 브라우저나 NodeJS 같은 멀티 쓰레드 환경에서 실행된다.
즉, 동시성을 보장하는 비동기, 논블록킹 작업들은 JavaScript 엔진을 구동하는 웹 브라우저, NodeJS (런타임 환경) 에서 담당한다.
⇒ JavaScript 동작원리에서 자세하게 알 수 있다.

3) 콜백함수(Callback Function) 사용 유형

익명 함수 사용

콜백함수는 이름 없는 '익명의 함수'를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.
함수의 이름(만) 넘기기
자바스크립트는 null 과 undefined 타입을 제외하고 모든 것을 객체로 다룬다. 함수를 변수 또는 다른 함수의 변수처럼 사용할 수 있다. 함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.
전역변수, 지역변수를 콜백함수의 파라미터로 전달 가능
전역변수(Global Variable) : 함수 외부에서 선언된 변수
지역변수 (Local Variable) : 함수 내부에서 선언된 변수

콜백함수(Callback Function) 주의할 점

this를 사용한 콜백함수
콜백지옥 (Callback Hell)

콜백 지옥(Callback Hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상이다.
주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 가독성이 떨어지면서 코드를 수정하기 어려워진다.
비동기적인 작업을 수행하기 위해 콜백함수를 익명함수로 전달하는 과정에서 생기는 콜백 지옥을
Promise, async/await, Generator 등을 사용해 방지할 수 있다.

2. Promise

1) Promise 란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.
싱글스레드인 자바스크립트에서 비동기 처리를 위해 사용한 Callback 함수의 에러/예외처리의 어려움, 중첩으로 인한 복잡도 증가라는 단점을 해결하기 위해 프로미스 객체를 ES6에서 언어적 차원으로 지원한다.
💡 Promise가 콜백을 대체하는 것은 아니지만, 콜백을 예측 가능한 패턴으로 사용할 수 있게 하며 Promise 없이 콜백만 사용했을 때 예상치 못한 동작을 막아주거나 찾기 힘든 버그를 상당 수 해결해준다.

2)Promise 만들기

const promise = new Promise((resolve, reject) => {
  /*
  비동기 작업 성공시 resolve()를 호출하고,
  비동기 작업 실패시 reject()를 호출하도록 구현한다.
  */
})

Promise 성공 시 resolve를 호출하고 실패 시 reject를 호출한다.

const promise = new Promise((resolve, reject)=>{
	//처리 내용
})

promise.then(
	//resolve가 호출되면 then이 실행
)
.catch(
	//reject가 호출되면 catch가 실행
)
.finally(
	//콜백 작업을 마치고 무조건 실행되는 finally (생략 가능)
)
Promise 다음엔 then()과 catch()를 사용한다.

then()은 생성한 프로미스 객체에서 인수로 전달한 resolve 가 호출되면 실행된다.
catch()는 생성한 프로미스 객체에서 인수로 전달한 reject 가 호출되면 실행된다.

// Promise 예제

const flag = true;
const promise = new Promise(((resolve, reject) => {
    if (flag) {
        resolve('resolve가 되었음')
    }
    else {
        reject('reject가 되었음')
    }
}))

promise.then((resolveMessage) => {
    console.log(resolveMessage)
})
.catch((errorMessage) => {
	console.log(errorMessage)
})

// 결과 : resolve가 되었음