Promise를 이해해보자!

Let's TECH🧐·2022년 5월 22일
1

Today I Learned

목록 보기
4/6
post-thumbnail

지난 글에서 Axios에 대해 설명하며 Axios는 return을 Promise 객체로 해주기 때문에 response 데이터를 다루기에 용이하다고 작성했었다. 하지만, 회사 내 스터디원분들께서 Axios는 return을 json 형식으로 하는 것이 아니냐고 질문해주셨고 그에 대한 답변을 작성해보려 한다.

하지만, 그 전에 promise에 대한 이해가 부족하다고 생각하여 promise의 개념 및 특징에 대해 먼저 알아보도록 하자!

Promise

Promise란?

  • 자바스크립트 비동기 처리에 사용되는 객체이다.
    자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다.
  • 결과값을 바로 return하지 않는 대신 promise를 return하여 최종적으로 나중에 값을 제공

Promise는 어디서 사용할까?

promise는 HTTP 호출 시 가장 많이 사용된다.
클라이언트가 서버에 데이터를 요청을 했다고 가정해보자. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.

JavaScirpt에서 promise는 비동기이기 때문에 끝내는 데 시간이 걸리게 된다. 하지만 JS 엔진이 promise가 끝날 때까지 기다리지 않고 다른 코드들을 실행한다. 그래서 promise가 최종적으로 값을 return하기 전까지 pending 상태가 return 되고 JS 엔진은 다른 코드들을 실행하게 된다.

Promise 생성 방법

const myPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('300ms 뒤에 값이 return 됩니다.');
	}, 300);
});

console.log(myPromise);

setTimeout(() => {
	console.log(myPromise);
}, 300);

위 코드 실행 시 아래와 같은 결과를 얻을 수 있다.

Promise {<pending>}
Promise {<fulfilled>: '300ms 뒤에 값이 return 됩니다'}

처음 console.log(myPromise);의 결과는 pending 상태의 Promise인 것을 알 수 있다. 즉, 아직 값이 도착하지 않은 상태이다.
300ms 뒤에 다시 한번 console.log(myPromise);를 한 결과는 pending에서 fulfilled로 변경되고 resolve()에 넘겨준 값이 console에 출력되는 것을 확인할 수 있다.

Promise의 then, catch 메소드

예시를 통해 setTimeout()을 사용하여 promise의 현재 상태와 값을 확인해보았다. 하지만 실제 프로젝트에서는 return값을 얻기 위해 걸리는 시간이 300ms가 될지 10s가 될지 알 수 없는 경우가 많다.
따라서, promise의 값이 resolve가 되든, reject가 되든 값이 return될 때 실행될 코드를 정의해주면 좋지 않을까? 이럴 때 사용하는 것이 바로 thencatch이다.

const myPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
    	resolve(300ms 뒤에 값을 return 합니다.');
    }, 300);
})

myPromise
.then(value => { console.log(value) });
.catch(error => { console.error('error : ' + error) });

위 예시에서는 promise에서 제공하는 then 메소드를 사용해 promise의 값이 추후에 return되면(시간이 얼마나 걸리든 상관없이) 이를 감지해 해당 값을 console에 출력하도록 해보았다. 위 코드를 실행해보면 300ms 뒤에 resolve에 값으로 넣어준 string 값이 console에 출력되는 것을 확인할 수 있다.

300ms 뒤에 값을 return 합니다.

위 예시에서 resolvereject로 변경한 후 그 결과를 보면 catch 메소드 내부에 있는 console.error()가 실행되는 것을 확인할 수 있다.

다음 시간에는 promise의 resolve, reject 메소드와 http 통신에서는 promise를 어떻게 활용할 수 있는지 예제를 통해 더 자세히 알아보도록 하자. 또 promise는 사용하다 보면 depth가 깊어지게 된다는 단점이 있는데 이를 해결하기 위해 나타난 async/await에 대해서도 함께 알아보겠다🙂

다음 시간에 알아볼 내용

  • resolve, reject 메소드
  • HTTP 통신에서 사용되는 promise 예제
  • async/await

참고 사이트

자바스크립트 Promise 쉽게 이해하기
JavaScript에서 Promise란 무엇인가?

profile
Minju's Tech Blog

0개의 댓글