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

angels6312님의 프로필 이미지
angels6312

작성한 질문수

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

async/await 질문 있습니다.

해결된 질문

작성

·

277

·

수정됨

0

해당 강의에서 예로 들어주신 부분 코드를 가져와 보면

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();

위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데

async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요

그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요

혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??

제가 이해한게 맞나 확인 부탁드립니다.

  1. 코드를 실행 하면 차례대로 한줄씩 실행된다.

  2. getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.

  3. getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.

  4. getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.

  5. await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다

라고 이해 했는데요... 이게 맞을까요??

아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

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

위 getData 함수에서 fetch를 호출할 때 await을 사용하지 않아도 되지 않느냐라고 질문을 주신 것 같은데요

fetch의 결과값을 동기적으로 바로 사용하기 위해 await을 사용한다고 이해하시면 됩니다.

만약 await을 사용하지 않으시려면 fetch에 콜백 함수를 달아 결과값을 처리하는 코드를 별도로 작성해 주셔야 합니다 (마치 Promise의 then 메서드를 붙이듯이요)

그러나 이렇게 되면 콜백이 연달아 발생하는 상황으로 인해 이전 파트에서 다루었던 콜백 지옥이 발생할 가능성이 있습니다. 따라서 대부분의 비동기 호출의 경우 await을 이용해 동기적으로 동작하는 코드로 만들어 처리하는 편 입니다.

그 아래의 코드 실행 과정에 대한 이해는 정확히 맞습니다.

추가로 비동기 함수의 실행은 멀티 쓰레드에서 처리하는것이 아닌 이벤트루프 or Web API라는 곳에서 처리하게 됩니다. 이에 대해서는 강의 중 비동기를 처음 다루는 파트에서 설명해 드리는데요 해당 파트를 참고하시거나아래의 문서를 읽어보시면 좋을 것 같습니다.

https://velog.io/@wjdghks963/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0-3-EventLoop-Web-API

angels6312님의 프로필 이미지
angels6312

작성한 질문수

질문하기