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

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

async/await에 대한 이해가 맞는지 확인 해주 실 수 있으실까요?

작성

835

안녕하세요 ~ 강의 잘 듣고 있습니다 
 
async / await을 파면서 궁금한점이 생겼는데 혹시 알려 주실 수 있으시면 정말 감사하겠습니다
 
첫번째 예시

    reader.onload = async e =>{
        array.push(e.target.result)
        let copyPreview = [...preview]
        await copyPreview.push(...array);
        setPreview(copyPreview)
      }
     }
    }

 
이렇게 코드가 있다는 가정 (제가 아는한에서 설명하겠습니다)
1. async안의 코드들은 전부 비동기로 작동한다 
2. await 붙은 코드는 .then느낌으로 맨 마지막에 작동한다 // 이 정의가 맞을까요?
 
두번째 예시 (공부하면서 퍼온겁니다)

async function showAvatar() {

  // JSON 읽기
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github 사용자 정보 읽기
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();
}

let response = await fetch('/article/promise-chaining/user.json');
라는 것은 fetch즉 백엔드에서 데이터를 불러오는 것이 비동기 이기 때문에 
await을 안붙여주면 let response에 데이터르 다 불러오기전엔 undefined가 뜨고
다 불러온 후에야 response에 데이터가 담기기 때문에 await을 쓴건가요? 

express redux react nodejs Next.js

답변 1

제로초(조현영)

지식공유자

1. 틀렸습니다. 비동기코드만 비동기고 나머진 전부 동기입니다. 저 코드에서는 setPreview 빼고는 전부 동기입니다.

2. 틀렸습니다. await은 비동기코드가 끝나길 기다린 후 다음 코드 실행하는 겁니다. 근데 그 비동기 코드도 프로미스여야 하고, push는 동기코드라서 await 붙이는 의미가 없습니다.

3. fetch와 json은 비동기 프로미스라서 await 붙입니다.

김김지호

질문자

댓글 정말 감사합니다 궁금증이 뻥 뚤렸는데 혹시 그렇다면

async/await은 밑과 같은 백엔드 데이터를 불러와서 변수에 저장할 때만 쓰일까요?

  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

제로초(조현영)

지식공유자

일단 주 목적은 비동기가 끝나길 기다린 후 다음 코드를 실행하는 것입니다. 부가적으로 프로미스 값까지 받아올 수 있는 것이고요.

김김지호

작성한 질문수

전체 Q&A

질문하기