[JavaScript] 자바스크립트 Promise에 대해 알아보자

Promise에 대해 알기전에

우선 동기/비동기처리와 콜백함수에 대한 내용부터 알아야 한다.

이 내용에 대해 이미 숙지하고 있다면 Promise 설명 부분으로 넘어가자.

 

동기/비동기 처리

 

동기 처리는 한 번에 하나의 작업만 순차적으로 처리하는 방식이다.

코드가 위에서부터 아래로, 순서대로 실행되며

각 작업이 완료되기 전까지는 다음 작업이 실행되지 않는 구조이다.

console.log('출근');
for (let i = 0; i < 1000000000; i++) { console.log('노가다') }  // 시간이 좀 걸리는 작업
console.log('퇴근');

 

우리가 다루는 자바스크립트 역시 ‘동기 처리(synchronous)’ 방식을 취하고 있다.

그래서 위 코드는 시간이 걸리더라도 for 반복문이 끝나야 비로소 ‘퇴근’을 출력할 것이다.

 

 

비동기 처리는 시간이 오래 걸리는 작업을 기다리지 않고,

실행이 바로바로 가능한 다음 작업부터 처리하는 방식이다.

 

console.log('출근');
setTimeout(function(){}, 1000);
console.log('퇴근');

 

다른 프로그래밍 언어같은 동기 방식이면 ‘출근’ → 1초 쉼 → ‘퇴근’이 맞겠지만,

자바스크립트는 ‘출근’ 후 setTimeout을 기다리지 않고 바로 ‘퇴근’을 출력해 버린다.

 

비동기 처리가 정확히는 자바스크립트 실행을 도와주는 웹브라우저의 방식인데

웹브라우저는 몇몇 특수한 코드(setTimeOut, ajax요청…)를 만나면

이런 시간이 걸리는 작업들을 Web API라는 대기 공간으로 제쳐두고

그 동안 다른 작업을 바로 실행할 수 있도록 하기 때문이다..

 

그런데 이런 비동기 처리 상황에서도

순서대로 코드를 실행하는 동기 처리방식을 사용할 수는 없을까?

 

(만약 진짜 1초 후에 코드를 실행시키고 싶다면???)

 

 

 

 

콜백함수

 

console.log('출근');
setTimeout(function(){
  console.log('퇴근');
}, 1000);

 

위 코드를 실행하면 ‘출근’후 1초 뒤에 ‘퇴근’이 출력된다.

함수안에 들어가는 함수인 ‘콜백 함수’는 어떤 작업이 완료된 후에야 호출이 되기 때문이다.

이런 식으로 콜백 함수를 사용하면 비동기 처리 상황에서도 작업을 순차적으로 실행할 수 있다.

 

하지만 마구잡이로 콜백함수를 사용해 버리면 문제가 좀 발생할 수도 있다.

 

함수1(function(){
  함수2(function(){
    함수3(function(){
      함수4(function(){
	      ...
	    });
    });
  });
}):

 

 

여러 콜백함수를 중첩하면 코드도 여러겹으로 중첩이 되는데

흔히 ‘콜백 지옥’이라 불리는 매우 복잡하고 더러운 코드가 나와 버리기 때문이다.

 

 

 

Promise

 

이런 콜백함수의 문제를 해결하기 위해 나온 것이 ‘Promise’이다.

사실 새로운 기능이라기보다는 단지 코드를 구성하는 패턴일 뿐이다.

const myPromise = new Promise((resolve, reject) => {
	try{
		setTimeout(() => {
        resolve('칼퇴!');
    }, 1000);
	} catch{
		reject('야근ㅠ')
	}
    
});

myPromise.then(result => {
    console.log(result); // '칼퇴!' 출력
}).catch(error => {
		console.log(error) // '야근ㅠ' 출력
	}
)

 

new Promise()로 변수 Object를 하나 만들어 주면 되는데,

이제 그 변수에 then()이나 catch를 붙여서 성공/실패의 여부를 판정해준다.

 

resolve()는 작업이 성공했을 때, reject()는 실패했을 때 호출이 된다.

위 코드처럼 각각 파라미터를 집어넣어 then()과 catch()로 보낼 수 있다.

then()은 성공하여 resolve()가 호출되었을 때,

catch()는 실패하여 reject()가 호출되었을 때 실행할 코드를 담고 있다.

 

위 코드의 Promise 내에서

setTimeout 함수가 잘 실행된다면 ‘칼퇴’가 출력되고 에러가 난다면 ‘야근’이 출력될 것이다.

 

 

이렇게 Promise를 사용하면 then를 이용하여

콜백함수에 비해 코드를 더 깔끔하게 작성할 수 있고

catch를 이용하여 실패시에도 특정한 코드를 실행할 수있다.

 

 

Promise 특징 및 주의사항

 

특징

Promise는 다음과 같은 세가지 상태를 가진다.

pending - 작업이 완료되지 않음 (성공/실패 판정 전)

fulfilled - 성공적으로 완료

rejected - 실패

 

Promise를 생성한 변수에 현재 상태가 담겨 있어

변수를 출력하면 현재 상태를 알 수 있다.

 

 

주의 사항

Promise는 특정 기능이 아닌 단지 코드를 디자인하는 방식 중 하나이기 때문에

동기를 비동기로 만드는 기능으로 착각하면 안된다.

 

Promise를 사용해도 자바스크립트는 동기적으로 실행이 된다.

다만, 특수한 함수(setTimeout, ajax 등)를 사용했을 때만 종종 비동기 처리가 되는 것이다.