[React] Promise란?

1. Promise란?

 

React에서 Promise는 비동기 처리에 활용되는 객체입니다. Promise는 주로 웹 서비스를 구현할 떄 원활한 데이터 통신을 위해 활용됩니다.

웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용됩니다. 즉, Promise 객체는 비동기 로직을 마치 동기처럼 사용할 수 있는 기능을 가집니다.

예를 들어 비동기 로직인 A, B, C 로직이 있다고 했을때 이를 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력을 시킬 수 있습니다.

 

 

 

2. Promise의 상태

Promise의 상태는 아래의 3가지 상태와 같습니다.

Pending(대기)	비동기 로직 처리의 미완료 상태
Fulfilled(이행)	비동기 로직 처리가 완료된 상태로 Promise 결과값 반환 상태
Rejected(실패)	비동기 로적 처리의 실패 또는 오류 상태

 

 

 

 

 

2-1. Pending

new Promise();

new Promise((resolve, reject) => {});

위와 같이 Promise 객체를 생성하면 대기 상태입니다. 인자는 resolve(실행)와 reject(실패)를 가집니다.

 

 

2-2. Fulfilled

// resolve()를 통해 Promise 실행
function getData(){
    return new Promise( (resolve, reject) => {
      let data = 10;
      resolve(data);
    })
  }
  
getData().then((resolvedData) => console.log(resolvedData));

2-1에서 Promise 객체를 생성하고 resolve에 parameter를 넣어주면 Promise가 이행상태로 넘어갑니다.

이후 then()을 활용하면 결과 값을 받을 수 있습니다.

 

 

2-3. Rejected

//reject를 호출해 고의적 실패로 연결
function getData(){
    return new Promise( (resolve, reject) => {
      reject(new Error("This is rejected!"));
    })
  }
  
getData().catch((err) => console.log(err));

Promise 객체인 reject인자는 호출 시 실패 상태가 됩니다.

이후 catch()를 활용하면 결과값을 받고 예외를 확인할 수 있습니다.

 

 

3. API 호출(Get) feat.Typescript

CandleTrade는 Type형태로 작성했습니다. 바이낸스 api를 이용해 코인 데이터를 가져오는 코드입니다.

import { useEffect, useState } from "react";

export type CandleTrade = {
  date: number[];
  open: number[];
  close: number[];
  high: number[];
  low: number[];
  closetime: string[];
  assetvolume: number[];
  basevolume: number[];
  quotevolume: number[];
};

const [candleData, setChartCandle] = useState<CandleTrade>({

useEffect(() => {
    async function getCoinCandle() {
      try {
        const response = await axios.get(
          'https://api.binance.com/api/v3/klines?symbol=BTCEUR&interval=1d&limit=500'
        );
        let tempList: CandleTrade = {
          date: [],
          open: [],
          close: [],
          high: [],
          low: [],
          closetime: [],
          assetvolume: [],
          basevolume: [],
          quotevolume: [],
        };

        for (var i = 0; i < response.data.length; ++i) {
          tempList.date.push(response.data[i][0]);
          tempList.open.push(response.data[i][1]);
          tempList.close.push(response.data[i][2]);
          tempList.high.push(response.data[i][3]);
          tempList.low.push(response.data[i][4]);
          tempList.closetime.push(response.data[i][5]);
          tempList.assetvolume.push(response.data[i][6]);
          tempList.basevolume.push(response.data[i][7]);
          tempList.quotevolume.push(response.data[i][8]);
        }

        setChartCandle(tempList);

      } catch (e) {
        console.log(e)
      }

    };
    getCoinCandle();
  }, []);

 

 

4. 활용

var promiseCount = 0;

function testPromise() {
    var thisPromiseCount = ++promiseCount;

    var log = document.getElementById('log');
    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') 시작 (<small>동기적 코드 시작</small>)<br/>');

    // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후)
    var p1 = new Promise(
        // 실행 함수는 프로미스를 이행(resolve)하거나
        // 거부(reject)할 수 있음
        function(resolve, reject) {
            log.insertAdjacentHTML('beforeend', thisPromiseCount +
                ') 프로미스 시작 (<small>비동기적 코드 시작</small>)<br/>');
            // setTimeout은 비동기적 코드를 만드는 예제에 불과
            window.setTimeout(
                function() {
                    // 프로미스 이행 !
                    resolve(thisPromiseCount);
                }, Math.random() * 2000 + 1000);
        }
    );

    // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고,
    // 거부됐을 때 할 일은 catch() 호출로 정의
    p1.then(
        // 이행 값 기록
        function(val) {
            log.insertAdjacentHTML('beforeend', val +
                ') 프로미스 이행 (<small>비동기적 코드 종료</small>)<br/>');
        })
    .catch(
        // 거부 이유 기록
        function(reason) {
            console.log('여기서 거부된 프로미스(' + reason + ')를 처리하세요.');
        });

    log.insertAdjacentHTML('beforeend', thisPromiseCount +
        ') 프로미스 생성 (<small>동기적 코드 종료</small>)<br/>');
}

if ("Promise" in window) {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", testPromise);
} else {
  log = document.getElementById('log');
  log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface.";
}

 

보통 axios나 thunk와 같은 api를 호출할 때 promise를 통해 호출하곤 합니다.