자바스크립트 async await 동작 원리 정리

자바스크립트의 비동기 처리 방식 중에서 특히 주목받고 있는 async/await 문법에 대해 자세히 알아보겠습니다. 이 문법은 비동기 작업을 다루는 방식에서 많은 개선을 이루어 주며, 코드의 가독성을 크게 향상시킵니다.

async/await란 무엇인가?

async/await는 자바스크립트에서 비동기 처리를 간편하게 수행할 수 있게 해주는 문법입니다. ES2017에 도입된 이 문법은 기존의 콜백 함수나 프로미스의 복잡함을 덜어주고, 동기식 코드처럼 작성할 수 있게 해줍니다. 이로 인해, 개발자는 더 쉽고 명확한 코드를 작성할 수 있습니다.

비동기 처리 방식의 진화

전통적인 자바스크립트의 비동기 처리 방식으로는 콜백 함수와 프로미스가 사용되었습니다. 하지만 이러한 방식들은 여러 비동기 작업이 연속적으로 발생할 때 가독성을 저하시키는 문제가 있었습니다. 이를 콜백 헬이나 프로미스 헬로 불리기도 했습니다. 예를 들어:

• 콜백 헬: 여러 개의 중첩된 콜백 함수로 인해 코드가 복잡해짐
• 프로미스 헬: 연속된 then() 메서드 사용으로 인해 흐름을 이해하기 어려움

이러한 문제를 보완하기 위해 async/await 문법이 도입되었습니다. 이 문법은 코드의 흐름을 직관적으로 보여주며, 오류 처리 또한 간편하게 할 수 있도록 돕습니다.

async 키워드

async 키워드는 함수 선언 앞에 붙여 주어야 하며, 이 키워드가 붙은 함수는 항상 프로미스를 반환합니다. 예를 들어:

async function myFunction() {
  return "Hello, World!";
}

위와 같이 작성하면 myFunction은 “Hello, World!”라는 문자열을 포함한 프로미스를 반환합니다. 따라서 이 값을 처리하려면 then() 메서드를 사용해야 합니다.

await 키워드

await 키워드는 async 함수 내부에서만 사용할 수 있으며, 프로미스가 처리될 때까지 기다릴 수 있게 해줍니다. 아래의 예에서 await가 사용된 부분을 확인해 보십시오:

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

위의 코드에서 fetch 함수가 호출된 후, 해당 프로미스가 이행될 때까지 기다린 다음, 응답을 JSON 형태로 변환합니다. 이 과정은 마치 동기식 코드처럼 흐름을 자연스럽게 만들고, 가독성을 높입니다.

async/await의 실제 사용 예

일상적인 비동기 API 호출을 async/await 키워드를 활용하여 어떻게 샘플 코드로 작성할 수 있는지 살펴보겠습니다. 아래의 예시는 여러 API를 호출하고 그 결과를 출력하는 과정입니다.

async function getMovies() {
  const response = await fetch('https://api.example.com/movies');
  const movies = await response.json();
  movies.forEach(movie => {
    console.log(movie.title);
  });
}
getMovies();

위의 코드에서 getMovies 함수는 데이터를 가져오고, 가져온 데이터를 JSON 형식으로 변환한 후, 각 영화 제목을 출력합니다. 이 과정이 비동기적으로 진행되는 동안 다른 코드의 실행을 막지 않으므로, 효율적인 코드 실행이 가능합니다.

예외 처리

async/await에서도 비동기 코드의 예외 처리를 손쉽게 할 수 있습니다. try/catch 블록을 사용하여 오류를 처리할 수 있습니다. 아래 코드를 통해 예외 처리를 알아보겠습니다:

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

이와 같이 예외 처리를 통해, API 호출 중 문제가 발생할 경우에도 프로그램의 흐름이 중단되지 않고, 적절한 메시지를 출력하게 됩니다.

마무리

async/await는 자바스크립트에서 비동기 처리의 복잡성을 줄이고, 코드의 가독성을 더욱 높여주는 강력한 도구입니다. 프로미스를 기반으로 이루어지지만, 더 직관적이고 동기적인 스타일로 비동기 작업을 처리할 수 있도록 도와줍니다. 앞으로의 개발에서 이 문법을 적극 활용하여 더 나은 코드 작성하시기 바랍니다.

여러분이 이번 글을 통해 async/await에 대한 이해가 깊어지길 바랍니다. 감사합니다!

자주 찾으시는 질문 FAQ