[React] 비동기(callback, promise, async/await)

 

📌 비동기 작업

서버의 API를 이용할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에
작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다.

비동기적으로 작업을 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 처리할 수 있다.

 

예시) setTimeout 함수

setTimeout() 실행 시점에 3초 동안 멈추는 것이 아니라, 일단 코드가 위부터 아래까지 다 호출되고 3초 뒤에 printMe() 함수가 호출된다.

function printMe() {
  console.log("Hello World!");
}

setTimeout(printMe, 3000);
console.log("대기 중...");

/*
대기 중...
Hello React!
*/

 

 

 

비동기 작업을 할 때 가장 흔히 사용하는 방법은

✨✨ 콜백 함수

함수 자체를 다른 함수의 인자로 전달하여 사용하는 함수

 

 

 

예시) 파라미터 값이 주어지면 1초 뒤에 10을 더해서 반환하는 함수

// 콜백 함수
// ex) 파라미터 값이 주어지면 1초 뒤에 10을 더해서 반환하는 함수
function increase(number, callback) {
  setTimeout(() => {
    const result = number + 10;
    if (callback) {
      callback(result);
    }
  }, 1000);
}

increase(0, (result) => {
  console.log(result);
});

 

여러 번 순차적으로 처리하고 싶다면? 콜백 함수 중첩해서 구현하기

// 콜백 지옥
console.log("작업 시작 ");
increase(0, (result) => {
  console.log(result);
  increase(result, (result) => {
    console.log(result);
    increase(result, (result) => {
      console.log(result);
      console.log("작업 시작 ");
    });
  });
});

/* 
작업 시작
10
20
30
*/

 

🚨 콜백 지옥
콜백 안에 또 콜백을 넣으면 코드의 가독성이 떨어져서 지양하는 것이 좋다

 

 

✨✨ Promise

콜백 지옥을 벗어나는 방법!

 

Promise에서 resolve된 값은 .then을 통해 받아 올 수 있다

Promise를 리턴하면 또 .then으로 처리 가능

 

// Promise
function increase2(number) {
  const promise = new Promise((resolve, reject) => {
    // resolve - 성공, reject - 실패
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        const e = new Error("숫자가 커요");
        return reject(e);
      }
      resolve(result);
    }, 1000);
  });
  return promise;
}

increase2(0)
  .then((number) => {
    console.log(number);
    return increase(number); // Promise를 리턴하면 또 .then으로 처리 가능
  })
  .then((number) => {
    console.log(number);
    return increase(number);
  })
  .then((number) => {
    console.log(number);
    return increase(number);
  })
  .catch((e) => {
    console.log(e);
  });

 

 

✨✨ async/await

Promise를 더욱 쉽게 사용할 수 있도록 해주는 키워드

 

함수의 앞부분에 async 키워드를 추가하고, 해당 함수 내부에서 Promise의 앞부분에 await 키워드를 사용한다.이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다.

 

// async / await
// Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다
async function runTasks() {
  try {
    let result = await increase(0);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}