[JavaScript] 프로미스 Promise

자바스크립트javascript는 비동기 언어다. 비동기 언어를 ①어떤 지시가 있은 후 ②그 결과를 통보 받는 시점에서 처리가 이어지는, '①이벤트 예약 - ②발생한 이벤트 처리' 구조를 가지고 있는 언어라고 이해하면 된다.

 

자바스크립트가 주로 네트워크 위에서 요청과 응답을 주고 받는 웹 프로그래밍에서 사용되기 때문에 위와 같은 지시-후 처리 구조가 자연스럽게 형성되었다. 왜냐하면 서버에 요청한 응답이 언제 올 지 모르기 때문에 하염없이 기다릴 수 없고, 해당 요청에 대한 응답이 도착한 시점에서 처리를 이어가는 것이 효율적이기 때문이다.

 

프로미스Promise(라고 쓰고 프라미스라고 읽는 것이 자연스러운 것 같다)도 위와 같이 이벤트가 일어난 시점에서 그 결과를 처리하는, 비동기 특성을 반영한 자바스크립트 문법이다.

 

우선 자바스크립트 프로미스의 문법과 동작을 살펴보자.

 

어떤 함수던 반환 값 대신 프라미스를 반환할 수 있다. 아래와 같이 3을 기준으로 값을 더하고 빼는 함수를 생각해보자.

function lessThanThree(number) {
	if(number < 3){
		return number + 1;
	}
	else{
		return number - 1;
	}
}

 

위 함수를 프라미스를 이용해서 다시 기술하면 아래와 같다.

function prmsLessThanThree(number) {
	return new Promise((resolve, reject) => {
		if(number < 3){
			resolve(number + 1);
		}
		else{
			reject(number - 1);
		}
	});
}

 

프라미스는 어떤 조건이 충족되었을 때(= 지시가 성공적으로 이행되었을 때) resolve 함수가 실행되도록 작성하고, 그렇지 않을 때(= 지시가 성공적으로 이행되지 않았을 때) reject 함수가 실행되도록 작성한다. 여기서 지시의 성공/실패 여부를 판단하는 조건(위 예에서는 number < 3 조건)을 지정하는 것도 작성자의 몫이다.

 

이렇게 작성된 프라미스는 then, catch 구문을 이용해서 사용한다. then 구문은 resolve가 실행되었을 때 그 결과를 매개변수(아래 예에서는 result)를 통해 받고, catch 구문은 reject가 실행되었을 때 그 결과을 지정한 매개변수(아래 예에서는 error)를 통해 받는다.

//	아래 코드는 resolve 실행 결과인 3(= number + 1)을 then 구문을 통해 반환한다.
prmsLessThanThree(2).then((result) => {
	console.log('[then]', result);
}).catch((error) => {
	console.log('[error]', error);
});

//	아래 코드는 reject 실행 결과인 298(= number - 1)을 catch 구문을 통해 반환한다.
prmsLessThanThree(299).then((result) => {
	console.log('[then]', result);
}).catch((error) => {
	console.log('[error]', error);
});

 

글만 읽으면 헷갈리는 것이 당연하다. 브라우저의 디버그 모드 - Console 탭에서 자바스크립트를 입력하고 실행시킬 수 있으니 반드시 실습해보고 자신만의 이해 과정을 거쳐야 정리가 된다. 크롬Chrome 웹 브라우저의 경우 F12 키를 누르면 아래와 같이 자바스크립트 입력과 실행이 가능하다.

 

<브라우저 디버그 모드 - 크롬Chrome 웹 브라우저의 경우 F12 키>

 

비동기 처리에서 프라미스를 자주 볼 수 있다. 문법과 동작 방법을 알고 있으면 자바스크립트 프로그래밍, 그리고 다양한 API들을 사용하면서 어떤 경우에 프라미스가 유용하게 사용되는지 볼 수 있을 것이다.

 

■