REACT의 async-await와 Promise의 차이

REACT

해당 포스팅에서는 REACT의 async-await와 Promise의 차이에 대해 다룹니다.

이번 포스팅 목차

• REACT의 async-await와 Promise의 차이
  

리액트의 async-await와 Promise의 차이

리액트에서 비동기 작업 을 처리할 때 Promise 와 async-await 는 중요한 역할을 합니다. 이 두 가지 방법은 비동기 코드를 다루는 방식을 단순화하고, 코드를 더 가독성 있게 만들어 줍니다. Promise 와 async-await 의 차이점, 사용 방법, 그리고 각각의 특성을 자세히 설명하겠습니다.

1. Promise

Promise 는 비동기 작업의 최종 완료 또는 실패를 나타내는 자바스크립트 객체입니다. 이는 미래에 완료될 작업을 다루기 위해 사용됩니다.

주요 특징

상태

Promise는 세 가지 상태를 가질 수 있습니다.

• Pending: 초기 상태, 아직 완료되지 않음.

• Fulfilled: 작업이 성공적으로 완료됨.

• Rejected: 작업이 실패함.

then 및 catch

Promise 객체는 .then() 및 .catch() 메서드를 통해 완료 및 오류 처리 콜백을 등록할 수 있습니다.

사용 예시

아래 예시에서 numbers 배열의 각 항목에 대해 고유한 key 를 제공하여 리액트가 각 항목을 고유하게 식별할 수 있도록 합니다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
  }, 1000);
});

promise
  .then(result => {
    console.log(result); // 'Success!'
  })
  .catch(error => {
    console.error(error);
  });

2. Async-Await

Async-Await 는 비동기 작업을 더 직관적 으로 작성할 수 있게 해주는 ES8(ECMAScript 2017) 문법입니다. async-await 는 Promise 를 기반으로 하며, 비동기 작업을 동기식 코드처럼 작성할 수 있게 합니다.

주요 특징

• async 함수: async 키워드를 함수 앞에 붙여 해당 함수가 비동기 함수를 반환하도록 합니다.

• await: await 키워드는 Promise 가 해결될 때까지 함수 실행을 일시 중단하고, 해결된 값을 반환합니다. await는 async 함수 내에서만 사용할 수 있습니다.

사용 예시

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

Promise와 Async-Await의 차이점

1. 코드 가독성

Promise

콜백 지옥(callback hell)을 피하기 위해 .then() 체인을 사용하지만, 복잡한 비동기 로직에서는 가독성이 떨어질 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

async-await

비동기 코드를 동기식 코드처럼 작성할 수 있어 가독성이 높아집니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

2. 에러 처리

Promise

.catch()를 사용하여 에러를 처리합니다.

promise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

async-await

try-catch 블록을 사용하여 에러를 처리합니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

2. 에러 처리

Promise

.catch()를 사용하여 에러를 처리합니다.

promise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

async-await

.catch()를 사용하여 에러를 처리합니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

3. 복잡한 비동기 흐름 관리

Promise

여러 비동기 작업을 처리할 때 .then() 체인이 복잡해질 수 있습니다.

fetch('https://api.example.com/data1')
  .then(response1 => {
    return fetch('https://api.example.com/data2');
  })
  .then(response2 => {
    return fetch('https://api.example.com/data3');
  })
  .then(response3 => {
    console.log('All data fetched');
  })
  .catch(error => {
    console.error('Error:', error);
  });

async-await

비동기 작업의 순차적 흐름을 더 직관적으로 작성할 수 있습니다.

async function fetchMultipleData() {
  try {
    const response1 = await fetch('https://api.example.com/data1');
    const response2 = await fetch('https://api.example.com/data2');
    const response3 = await fetch('https://api.example.com/data3');
    console.log('All data fetched');
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchMultipleData();

마무리

리액트에서 Promise 와 async-await 는 비동기 작업을 처리하는 두 가지 주요 방법입니다. Promise 는 비동기 작업의 결과를 나타내는 객체이며, .then()과 .catch() 메서드를 통해 작업 완료와 에러 처리를 다룹니다. 반면, async-await 는 Promise 를 기반으로 하며, 비동기 코드를 동기식 코드처럼 작성할 수 있게 해줍니다. async-await 는 가독성이 높고, 복잡한 비동기 로직을 더 쉽게 작성할 수 있게 해줍니다. 각각의 방법은 상황에 따라 적절히 사용해야 하며, async-await 는 특히 코드의 가독성을 중시하는 경우에 유용합니다.