프로미스보다 쉬운 async와 await의 사용법과 장점

JavaScript는 웹 애플리케이션에서 비동기 처리를 효율적으로 다룰 수 있도록 다양한 방식의 비동기 처리 기법을 제공합니다. 그 중에서도 async와 await는 비동기 코드 작성 시 매우 중요한 도구입니다. 이 글에서는 async와 await를 사용한 비동기 처리 방식과, 이를 사용하지 않았을 때의 차이를 중점적으로 살펴보겠습니다.

 

 

 

---

1. 비동기 처리란?

 

비동기 처리(asynchronous programming)는 코드가 실행되는 동안 다른 작업들이 동시에 진행될 수 있도록 하는 방식입니다. JavaScript에서 비동기 처리는 서버 요청, 파일 읽기, 타이머 설정 등 시간이 걸리는 작업을 처리할 때 주로 사용됩니다. 비동기 처리를 통해 UI가 멈추지 않게 하고, 사용자 경험을 개선할 수 있습니다.

 

JavaScript에서 비동기 작업을 다룰 때,

콜백 함수(callback),

프로미스(Promise),

그리고 async/await와 같은 방법들이 있습니다.

 

그 중 async와 await는 Promise 기반으로 비동기 코드를 작성할 수 있게 해주는 기능입니다.

 

 

 

---

2. async와 await란?

 

async와 await는 ES2017(ES8)에서 도입되었으며, 비동기 작업을 더 간결하고 이해하기 쉽게 만들어 줍니다. async는 함수 앞에 붙여서 해당 함수가 항상 프로미스를 반환하도록 하고, await는 프로미스가 처리될 때까지 기다릴 수 있도록 하는 키워드입니다.

 

 

img

 

 

2.1 async 함수

async 함수는 항상 Promise 객체를 반환합니다. async를 사용하면 함수 내에서 비동기 작업을 마치 동기 코드처럼 작성할 수 있습니다. 예를 들어, async 함수는 await를 사용할 수 있는 함수로 변경됩니다.

 

 

async function fetchData() {
  return "데이터가 성공적으로 반환되었습니다!";
}

fetchData().then(data => console.log(data)); // "데이터가 성공적으로 반환되었습니다!"

 

위 코드에서 fetchData() 함수는 async로 선언되어 항상 Promise를 반환합니다. 이때 반환된 값은 실제로 Promise.resolve("데이터가 성공적으로 반환되었습니다!")와 같습니다.

 

2.2 await 키워드

 

await는 async 함수 내에서만 사용할 수 있는 키워드입니다. await는 프로미스가 처리될 때까지 기다리고, 처리된 결과값을 반환합니다. await를 사용하면 비동기 작업을 마치 동기 코드처럼 순차적으로 처리할 수 있어 코드의 가독성이 높아집니다.

 

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

 

위 예시에서 await는 fetch와 data.json() 프로미스가 완료될 때까지 기다립니다. 그 덕분에 코드가 직관적이고 동기 방식처럼 작성될 수 있습니다.

 

반응형

 

 

---

3. async/await 없이 비동기 처리

 

async와 await가 도입되기 전에는 콜백 함수나 프로미스를 사용하여 비동기 처리를 했습니다. 프로미스를 사용한 예시는 아래와 같습니다:

 

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => console.error('에러 발생:', error));
}

fetchData();

 

위 코드는 프로미스를 체이닝하여 비동기 작업을 처리하는 방법입니다. 비동기 코드가 복잡해지면, 여러 개의 .then()과 .catch()가 중첩되어 코드가 난해해지고, 이를 "콜백 헬(callback hell)"이라고 부릅니다. async와 await는 이러한 문제를 해결하는데 도움을 줍니다.

 

 

---

4. async/await와 프로미스의 차이

async/await는 프로미스를 기반으로 동작하지만, 그 문법적 차이는 매우 큽니다. 프로미스를 사용하는 경우, then()과 catch() 메서드를 사용하여 결과를 처리하는 반면, async와 await는 마치 동기적인 코드처럼 작성할 수 있습니다. 이로 인해 코드의 가독성이 향상되고, 예외 처리가 더 직관적으로 이루어집니다.

프로미스 사용 예시

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터가 성공적으로 반환되었습니다!");
    }, 2000);
  });
}

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

 

async/await 사용 예시

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터가 성공적으로 반환되었습니다!");
    }, 2000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

 

 

 

---

5. async와 await의 장점

 

1. 가독성: 비동기 코드를 동기 코드처럼 작성할 수 있기 때문에, 코드가 더 직관적이고 읽기 쉬워집니다.
2. 에러 처리: try...catch 블록을 사용하여 비동기 코드에서 발생하는 에러를 처리할 수 있습니다.
3. 동기적인 흐름: 비동기 작업들이 순차적으로 처리되므로 코드의 흐름을 쉽게 이해할 수 있습니다.

 

 

 

---

6. async와 await의 단점

 

1. 지원되지 않는 환경: async/await는 ES2017에서 도입되었으므로, 이보다 낮은 버전의 브라우저에서는 지원되지 않습니다. 이를 위해 Babel 등의 트랜스파일러를 사용해야 할 수 있습니다.
2. 예외 처리 주의: async 함수 내에서 발생하는 예외는 반드시 try...catch로 처리해야 합니다. 그렇지 않으면, 예외가 그대로 누락되어 애플리케이션에 문제가 발생할 수 있습니다.

 

 

---

 

 

async와 await는 JavaScript에서 비동기 작업을 처리하는 데 있어 중요한 도구입니다. async와 await를 사용하면 프로미스를 직관적이고 동기적인 코드처럼 작성할 수 있으며, 코드의 가독성도 향상됩니다. 또한, 비동기 코드에서 발생할 수 있는 오류를 try...catch로 처리할 수 있어 안정성을 높일 수 있습니다.

JavaScript에서 비동기 처리를 제대로 이해하고 사용한다면, 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다. async와 await는 이러한 목표를 달성하는 데 중요한 역할을 합니다.