이제 API에서 data를 불러올 것이다! 🌷
AJAX를 이용해서 fetch 후 데이터를 불러온다.

AJAX

AJAX는 url을 자바스크립트로 비동기화 방법을 써서 불러온다.

AJAX를 사용하는 이유는 데이터나 무언가가 불러올 때마다 새로고침을 하지 않아도 된다는 점 때문이다. 로딩을 하면 API를 불러오고 동시에 평점을 가져올 수 있다.
자바스크립트와 같이 데이터를 다룰 수 있고 새로고침 없이 작업이 가능하다. 리액트와 작업하기 쉽다.

내가 사용한 API는 yts로 영화 데이터가 담긴 API이다.

componentDidMount에 컴포넌트가 랜더링된 후 api를 호출한다.
localhost:3000으로 접속해서 네트워크를 체크해보면
call localhost -> call bundle.js -> call DB(API)
순으로 호출된다.

-> 여기서 CORS 문제가 발생했다. CORS는 다음에 정리한다.

Promise

promise는 asynchronous programming이다.
다시 정리하면

Promise는 객체로 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

만약 두개의 API에서 데이터를 불러온다고 하면 첫번째 API에 fetch해서 데이터를 불러온다. 데이터가 불러오면 두번째 API에 fetch하게 된다. 만약 첫번째 API의 데이터를 불러오는데 오랜 시간이 걸린다면 두번째 API는 속절없이 기다려야 한다.
이럴 때 promise를 사용하게 된다.

Promise는 계속해서 다른 작업을 스케줄한다. 즉, 모든 작업들은 다른 작업과는 상관없이 진행하게 된다. 또한, promise는 시나리오 잡는 방법을 알려준다. 작업이 완료되었을 때, 실패되었을 때를 알려준다.

fetch라는 promise를 사용하고 error가 발생하면 catch로 넘어간다. API에서 fetch한 것을 첫번째 then에서 받게된다. json형태로 바꿔서 두번째 then으로 넘겨준다.

Async & Await

Async? Await?

async와 await는 비동기 처리할 때 사용된다.

async function 함수명() {
  await 비동기_처리_메서드_명();
}

Async

async함수는 Promise 객체를 반환한다.

async function foo() {
    return 1
}

function foo() {
    return Promise.resolve(1)
}

위와 아래의 코드는 동일한 코드이다.

Await

await는 async 함수를 정지하고 전달된 Promise의 해결을 기다리고 다시 실행을 하고 완료된 값을 반환한다.

async function foo() {
    await 1
}

function foo() {
    return Promise.resolve(1).then(() => undefined)
}

위와 아래의 코드는 동일하다.

예시!🐰🐰🐰

실습

위의 사진 같이 componentDidMount()는 큰 function이다. function은 작게 만드는 것이 좋다.

_callApi() API를 호출하는 함수를 만든다. API에서 받아온 데이터를 JSON 형태로 return 한다.

_getMovie()는 받아온 데이터를 state에 저장하는 함수이다. async를 사용해서 비동기 함수로 만들어준다. 이전 라인의 작업이 끝나기를 기다리지 않는다. 순서없이 진행된다.
movies 변수에 저장한다. await를 사용하는데 API가 호출되는 함수인 _callApi()함수가 마치면 코드가 실행된다. 밑의 코드는 callApi()가 끝나기 전까지는 실행되지 않는다.

componentDidMount는 작은 function이 되었다.