[React] 비동기 처리에 대하여 (async, Promise)

비동기 처리란?

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드 먼저 수행하는 것을 말함

• 동기 방식 : 순차진행
• 비동기 방식 : 순차진행 X

동기의 경우 특정 코드가 실행되어야 다음 코드가 실행될 수 있기에 대기 시간이 길다

Promise란?

자바스크립트 비동기 작업의 완료 또는 실패를 나타내는 객체

Promise 상태

• 대기 (Pending) : 이행하지도, 거부하지도 않은 초기 상태
• 이행 (fulfilled) : 연산이 성공적으로 완료됨
• 거부 (rejected) : 연산이 실패함

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then((value) => `${value} and bar`)
  .then((value) => `${value} and bar again`)
  .then((value) => `${value} and again`)
  .then((value) => `${value} and again`)
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  });

.then과 .catch로 결과 처리

async란?

비동기 함수 선언을 위한 키워드
Promise를 사용하여 결과를 반환하나, 동기 함수같은 구조로 작성 가능

• async : 함수 앞에 async를 붙이면 해당 함수는 항상 Promise 반환
• await : Promise가 이행될때까지 async 함수를 일시정지 시킴(대기)

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.log(error));

공식 문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise