아래 글은 <한입 크기로 잘라 먹는 리액트> 강의를 참고한 내용입니다.
한입 크기로 잘라 먹는 리액트(React.js)

---

📌 비동기 처리방법

✔️ 콜백

콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.

💻 예시코드

function isPositive(num, resolve, reject) {
  setTimeout(() => {
    if (typeof num === "number") {
      //성공 -> resolve
      resolve(num >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("주어진 값이 숫자형이 아닙니다.");
    }
  }, 2000);
}

isPositive(
  10,
  (res) => {
    console.log("성공적으로 수행된: ", res);
  },
  (err) => {
    console.log("실패하셨음: ", err);
  }
);

콜백지옥

수많은 콜백을 전달하는 것을 콜백지옥(Callback hell)이라고 한다. 콜백함수로 비동기 처리를 할 때 콜백지옥을 발생킬 수 있어서 추천하지 않는다.

💻 예시코드

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000); //3초후에 실행
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(4, 5, (a_res) => {
  console.log("A RESULT: ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B RESULT: ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C RESULT: ", c_res);
    });
  });
});

✔️ Promise

promise와 then을 이용하면 콜백지옥을 방지할 수 있다.

💻 예시코드

//then체이닝
//이렇게 실행해야 콜백헬이 발생하지 않는다
taskA(5, 1)
  .then((a_res) => {
    console.log("A: ", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("B: ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C: ", c_res);
  });

//이렇게 나눠서도 사용가능
const bPromiseResult = taskA(5, 1).then((a_res) => {
  console.log("A: ", a_res);
  return taskB(a_res);
});

bPromiseResult
  .then((b_res) => {
    console.log("B: ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("C: ", c_res);
  });

✔️ async/await

async

promise를 더 쉽게 사용하도록 도와주는 키워드로 함수 앞에 붙여서 그 함수가 promise를 반환하도록 해준다.

await

async가 붙은 함수에서만 사용가능한 키워드로 동기처럼 보이는 비동기 코드를 작성하게 해준다.

• await가 붙으면 promise가 해결될 때까지 기다린다.

💻 예시코드

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve(), ms);
  });
}
async function helloAsync() {
  await delay(3000);
  return "hello async";
}

async function main() {
  const res = await helloAsync();
  console.log(res);
}

main();

---

참고문헌
https://ko.wikipedia.org/wiki/%EC%BD%9C%EB%B0%B1