Async와 await에 대해 질문있습니다.

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

2.14) 비동기 작업 처리하기 3. Async&Await

해결된 질문

작성

안녕하세요 강의 너무 잘 보고 있습니다. 강의를 듣다가 Async와 await에 대해 질문이 있습니다.

api요청과 같이 시간이 걸리는 작업은 비동기로 이루어지기 때문에 다른 작업이 먼저 이루어지고 그다음 데이터가 불러오면 그 작업을 해야되므로 비동기로 만들어 주기 위해 async를 붙인다 까지는 이해가 되는데 await은 비동기 작업까지 다 처리되고 결과값을 얻기 위해 사용이 되는건가요?

마지막으로 async는 함수 앞에 작성이 되는데 await은 어디에 작성이 되는것인지 궁금합니다.

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

네 정확합니다 await은 비동기 작업을 마친 결과값을 동기적으로 얻기 위해 사용합니다.

예를 들어 다음과 같이 비동기적으로 백엔드 서버로부터 API를 호출해 데이터를 불러오는 fetchData 함수가 있다고 가정해보겠습니다.

async function fetchData() {
  let response = await fetch("...");
  let data = await response.json();

  return data;
}

위 fetchData 함수의 결과값 "data"를 특정 함수 내부에서 변수에 저장해 활용하고 싶으시다면 다음과 같이 await을 활용하셔야 합니다. 이때 await은 다음 코드에서 보이는 것 처럼 비동기 함수 호출 앞에 작성됩니다.

async function main(){
  const data = await fetchData();
  console.log(data);
}

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
부드러운 족제비님, async/await에 대한 질문을 주셔서 감사합니다.

Async와 Await의 역할:

async 키워드는 비동기 함수를 정의합니다. 비동기 함수를 사용하면 프로미스를 반환할 수 있으며, 일반적으로 비동기 작업을 수행하는 함수에 사용합니다.
await 키워드는 async 함수 내에서만 사용할 수 있습니다. 이 키워드는 프로미스를 해결할 때까지 함수의 실행을 일시 중지합니다. 그 후, 프로미스가 해결되면 일시 중지된 위치부터 코드 실행을 재개합니다.

await가 작성되는 위치:

await은 일반적으로 프로미스를 반환하는 함수 앞에 위치하며, 이는 해당 비동기 작업이 완료될 때까지 대기하는 역할을 수행합니다. 예를 들어, let result = await someAsyncFunction();과 같이 사용합니다.

다음은 async와 await의 기본적인 사용 예제입니다.

async function fetchData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

위 예제에서 async 함수인 fetchData는 await 키워드를 사용하여 fetch 작업과 json 변환 작업이 완료될 때까지 대기합니다.

부드러운 족제비님의 질문의 요점은 비동기 작업 처리가 어떻게 이루어지는지, 그리고 async와 await가 어떤 역할을 하는지에 대한 이해로 보입니다. 이와 관련하여 다음의 유사한 질문과 답변을 참고하시면 도움이 될 것 같습니다:

api 호출하기 질문드려요에서는 async와 await 사용에 대한 기본 설명을 제공합니다.
async/await 질문 있습니다.에서는 await의 동작 방식과 비동기 작업의 흐름에 대한 상세한 설명이 포함되어 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Async와 await에 대해 질문있습니다.