Javascript) Promise 알아보기

프론트엔더 인턴을 하면서 사용자가 업로드한 파일을 서버로 보내고, 서버에 저장된 데이터를 가져와 프론트엔드에 랜더링해야 했습니다. 처음 해보는 일이라 구글링 열심히 하고, 많이 해매면서 겨우 해냈는데 이때 처음 접했던 Promise라는 개념에 대해 이번 글에서 설명하겠습니다. 제대로 사용해보기 전에 공부 차원에서 기록하는 글이기 때문에 Reference들을 많이 참고 하였습니다. 

---

Promise 란?

• Promise의 개념 

자바스크립트는 대부분이 비동기 패턴으로 이루어집니다. 어떤 작업을 요청하면서 콜백 함수를 등록하면, 해당 작업 완료 결과를 나중에 콜백 함수를 통해 알려주는 방식이죠. 프로미스는 이러한 자바크스립트의 비동기 처리에 사용되는 객체입니다. 

쉽게 말해, 지금은 요청한 것이 없으니 이상이 있으면 요청한 것을 전달해주고, 에러가 뜨면 전달하지 않겠다는 약속이라고 할 수 있습니다. 

• Promise의 필요성과 장점 

프로미스는 주로 서버에서 HTTP 메소드 중 GET 메소드 등을 이용해 받아온 데이터를 화면에 렌더링 할 때 사용됩니다. 

import axios from "axios"

const getData = axios.get("url주소").then((res) => console.log(res)).catch((error) => console.log(error));

React에서 axios를 이용하여 데이터를 받아오는 경우 위 예시와 같은 코드를 이용할 수 있습니다. 파라미터로 주어진 서버 URL 주소로 데이터를 달라는 요청을 보냅니다. 그런데 서버에서 데이터를 전송하고, 전달받는데에는 단순히 HTML 코드를 렌더링 하는 것보다 시간이 더 걸리게 됩니다. 그런데 데이터를 서버로부터 다 받아오기도 전에 데이터를 화면에 랜더링 하려고 하면 오류가 발생하거나 빈화면이 뜨게 됩니다. 이런 문제를 해결하기 위해서 비동기 방식을 사용하고, 이때 프로미스가 필요합니다. 

프로미스는 규모가 큰 자바스크립트 코드의 경우 콜백의 중첩이 많이 발생해 복잡도가 높아질 수도 있는데 이때 프로미스 패턴을 이용해 비동기 작업을 보다 효율적으로 처리할 수 있게 됩니다.

---

Promise 구조

JSX에서 프로미스를 사용한 경우의 구조는 다음과 같습니다.

const PromisePattern = (param) => new Promise((reject, resolve) => {
    // 파라미터가 참일 경우
    if (param) {
        resolve('success');
    }
    // 파라미터가 참이 아닐 경우 
    else{
        reject('fail');
    }
}


// Promise 호출하는 함수 
const callPromise = () => {
	PromisePatter(true).then((res) => console.log(res)).catch((error) => console.log(error));
}

 new Promise( ... ) 로 Promise 선언을 하고, 전달하고, 이상이 없다면 resolve 함수를, 에러가 있으면 reject 함수를 실행합니다. 여기서 resolve와 reject 함수가 생소하게 느껴집니다. 이를 이해하기 위해서는 프로미스의 3가지 상태에 대해 알아야 합니다. 

---

Promise의 상태 States

프로미스의 상태는 프로미스의 처리 과정을 말합니다. new Promise()로 생성된 프로미스는 생성 후 종료될 때까지 다음 3가지의 상태를 가지게 됩니다. 

• Pending 대기

요청된 작업이 아직 안료되지 않아 fulfilled 또는 reject 되기 이전 상태로 new Promise(); 메소드를 호출하면 pending 상태에 있는 것입니다. 

Promise 메소드 선언시 콜백 함수를 선언할 수 잇고, 콜백 함수의 인자로 resolve와 reject를 전달합니다. 

• Fulfilled 이행

요청된 작업이 완료되어 프로미스 결과 값이 반환된 상태로 Promise 메소드 내부에 콜백 함수가 정상 작동된 경우 resolve 함수를 실행하는데 이를 fulfilled 상태라고 합니다. 이 상태에서 위 예시의 callPromise 함수를 호출하면 그 결과를 then에서 res로 받아 콘솔에 결과가 찍히게 됩니다. 

• Rejected 실패

요청된 작업이 실패하거나 오류가 난 상태로 콜백 함수가 정상 작동하지 않은 경우 reject 함수가 실행되는데 이를 rejected 상태라고 합니다. 이 상태에서 위 예시의 callPromise 함수를 호출하면 그 결과는 catch에서 error로 실패 이유를 결과 값으로 받아 콘솔에 찍히게 됩니다. 

---

이번 글에서 Promise의 아주 간단한 개념과 구조에 대해서 공부해 보았습니다. 

이번에 공부한 내용을 바탕으로 실무에 유용하게 사용하여 다음 번엔 예제를 가져와 설명해보도록 하겠습니다. 

감사합니다 :) 

---

References

• joshua1988.github.io/web-development/javascript/promise-for-beginners/
• programmingsummaries.tistory.com/325