[JavaScript] Promise - callback 우아하게 처리하기

callback 함수를 우아하게 처리할 수 있는 Promise에 대해 소개합니다.

 

A, B 라는 두 가지 상황이 있다고 가정하겠습니다.  우리는 A라는 상황이 실행되고 A의 결과에 따라 B가 실행되기 희망합니다. 이 때 어떠한 방식으로 이를 구현할 수 있을까요? 대표적으로 callback 함수를 이용하는 방법이 있습니다. A 함수의 Parameter에 B 함수를 넣고 A 함수가 완료되면 B 함수를 실행하도록 하는 것이죠.

 

callback은 비동기 상황을 해결하는 가장 간단한 방법입니다. 하지만 A, B라는 두 상황이 A, B, ... F 까지 있다면 어떨까요. callback으로 이 상황을 표현할 수 있을까요? 물론 표현할 수 있습니다. 하지만 상당히 많은 callback을 중첩해서 사용해야 할 것입니다.  

A(() => {
	B(() => {
		C(() => {
			D(() => {
				E(() => {
					F(() => { ... })
				})
			})
		})
	})
})

 

이런 상황에서 Promise는 직관적인 코드를 작성할 수 있도록 도와줍니다. 그럼 callback 함수를 다 우아하게 표현할 수 있는 Promise에 대해서 자세히 살펴볼까요?

A.then(B)
    .then(C)
    .then(D)
    .then(E)
    .then(F)
    .catch(function () { ... })

 

 

Promise 특징

Promise의 큰 특징들을 정리했습니다. 아래 용어를 이해했다면 Promise를 상당부분 이해했다고 봐도 무방합니다.

• Promise 구현과 호출 이해하기
  • resolve, reject 함수 이해하기
  • then, catch 함수 이해하기
• Promise 상태 이해하기 - pending(대기), fulfilled (성공), rejected (실패), settled(결정 - fulfilled or rejected)

 

 

Promise 구현과 호출 이해하기

Promise는 크게 구현로직과 호출로직으로 나뉩니다. 

const promise = new Promise(function (resolve, reject) { ... }) // 구현부
promise.then(function() { ... }, function () { ... }) // 호출부

 

구현로직을 작성하는 방법은 다음과 같습니다.

우선 Promise 객체를 생성하고 파라미터로 callback 함수를 받으며 callback 함수는 resolve, reject를 파라미터로 받는 함수입니다. 여기까지 작성했다면 구현로직을 모두 작성했습니다! Promise 인스턴스는 호출되기 전까진 아무동작도 하지 않으며 나중에 실행될 callback을 담고 있을 뿐입니다.

 

호출로직은 앞서 작성된 Promise 인스턴스의 then 함수를 실행함으로써 동작합니다. 이제 Promise 인스턴스가 담고 있던 callback 함수가 실행됩니다. 여기서 callback 함수가 가지고 있던 resolve, reject에 대한 파라미터를 넣어줘야 합니다. then 함수의 첫 번째, 두 번째 매개변수에 resolve, reject에 해당하는 호출부의 callback 함수를 넣어줍니다.

 

 

Promise 상태 이해하기

Promise의 상태는 앞선 주제인 구현과 호출과 연결되는 주제입니다. Promise 객체가 구현되고 아직 호출되지 않은 상태를 Pending(대기)라고 합니다. Promise 인스턴스가 호출되어 callback이 실행된 상태를 Settled(결정)이라고 합니다. Settled은 Fulfilled(성공), Rejected(실패) 두 가지 상태로 나눠집니다.

 

 

 

 

 

 

개인적으로 Promise를 이해하다보면 비동기 처리를 위한 새로운 메카니즘이라기 보단 callback을 담고 있다가 호출되면 callback의 결과에 따라 준비된 success 혹은 fail 함수를 실행하는 객체에 가까운 것 같습니다. 실제로 Promise의 내부 구현을 보지 못했지만 동작을 직관적으로 표현하자면 아래와 같은 방식으로 구현되었을 것 같습니다.

class Promise {
  contructor (callback) { ... }
  
  then (success, fail) {
  	callback(success, fail)
  }
}