동기와 비동기 이해하기

우선 데이터를 받는 방식인 동기와 비동기를 이해해보자. 비동기는 순서 없이 동시에 일어나고, 비동기는 순차적으로 일어난다고 생각하면 쉽다. 비동기 방식은 서버에 요청을 보냈을 때 응답이 돌아오지 않아도 바로 다른 요청을 실행한다. 그와 반대로 동기 방식은 서버에 요청을 보냈을 때 응답이 돌아오는 것을 확인한 후에 다른 요청을 실행한다.

자바스크립트는 동기적 방식으로 작동한다.
BUT! 자바스크립트가 사용하는 외부에 요청하는 대부분의 라이브러리들은 비동기 방식으로 작동한다.

async-await의 동작

그렇다면 왜 async-awit는 왜 짝꿍일까?

async의 역할

async는 함수 앞에 위치하며 항상 promise 값을 반환한다.

await의 역할

await는 async가 명시된 함수 안에서 동작한다. await는 promise가 처리될때까지 기다린다.

async-await의 사용

    const handleClickRestApi = () => {
      const result = axios.get("주소")
      console.log(result)
    }
    //콘솔 결과값
    // promise
    

자바스크립트는 보통 윗줄부터 차례로 실행되는 동기적 방식이 사용된다. 하지만 예시 코드처럼 외부에 rest api를 요청하는 경우는 비동기로 동작하기 때문에 콘솔에서 'promise'라는 값을 확인할 수 있다. api 요청이 실행되고 백엔드에서 데이터를 꺼내오는 시간이 필요한데 기다리지 않고 바로 아랫줄이 실행되었기 때문이다.

promise 는 언젠가는 결과값을 주겠다는 표현으로 생각하면 된다.

이러한 문제점을 제어하기 위한 수단이 async-await이다.

const handleClickRestApi = async() => {
  const result = await axios.get("주소")
  console.log(result)
}

async-await는 짝꿍이다. 예시와 같이 함께 써줘야한다.
api 요청이 실행되는 코드에 await가 벡엔드에서 데이터를 가지고 올 때까지 다음줄이 실행되지 않도록 해준다. 후에 요청에 대한 응답을 받으면 그때 다음 코드가 실행되며 원하는 값을 얻을 수 있다.