React - 리엑트를 다루는 기술

콜백함수에서 콜백 지옥에 빠지지 않기위한 Promise 사용 방식에 대한 복습

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(()=> {
      const result = number + 10;
      if(result > 50){
        const e = new Error('NumberTooBig');
        return reject(e);
      }
      resolve(result);
    }, 1000)
  })
  return promise;
}

increase(0) // then 을 이용해서 Promise에서 resolve 된 값을 가져와서 콘솔에 나타냄 
.then(number => {
  console.log(number);
  return increase(number);  // 가져온 값을 콘솔로 나타낸 후에 return increase(number)로 다시 increase에 넣어줌 .then 이후에 적힌 number는 위의 increase의 number가 아닌 promise함수에서 10 더해지고 난 후의 값이다.
})
.then(number => { //위에서 다시 increase에 인잘 10을 넣어주어 promise에 10+10이라는 식이들어가서 20이 나오게 된다.
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.then(number => {
  console.log(number);
  return increase(number);
})
.catch(e => { // catch 를 이용하면 도중에 에러가 발생했을때 잡아줄 수 있다.
  console.log(e);
})

위와같이 then을 이용해서도 할 수 있지만 보다 가독성과 쉽게 사용하기 위해서
async과 await을 이용하여 나타낼수 있다.

function increase(number) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(()=> {
      const result = number + 10;
      if(result > 50){
        const e = new Error('NumberTooBig');
        return reject(e);
      }
      resolve(result);
    }, 1000)
  })
  return promise;
}

async function runTasks() {
  try { // try/catch 구문을 사용하여 에러를 처리할 수 있다.
    let result = await increase(0);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
  } catch(e) {
    console.log(e);
  }
}

console.log(runTasks())

위와 같은 형식으로 async 문법을 이용해서 콜백 함수로 불러올 값들을 runTasks 함수로 나타내고 에러를 처리하기위해서 try와 catch 를 이용하였다.
또한 async 문법을 사용하기 위해서는 await 키워드를 함수의 앞부분에 추가하여야 하므로 increase의 앞에 추가해 주었다.
(setTimeout이라는 콜백 함수를 먼저 앞에 선언했을 때 사용 가능한 방식들이다.)