axios api데이터 가져오기 연습

yarn add axios

// import axios
import axios from "axios";

componentDidMount에서 api url을 불러와준다.

네트워크에서 잘 들어와있는 것을 확인할 수 있다.

이젠 axios가 주는 이 데이터를 잡아야한다.

하지만 axios.get은 느리기때문에 

자바스크립트에게 componentDidMount함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해야한다.

방법1. componentDidMount앞에 async을 추가해준다.

방법2. 함수를 만들어준다.

1. isLoading: true

2. true이기때문에 Loading... render해준다.

3. application이 mount된 후, getmovies function호출 (componentDidMount())

4. getMovies 여기선 axios.get을 사용해 완료되기까지 시간이 걸리므로 await을 넣어줌

(async를 사용하지않으면 await을 쓸 수 가없음)

이걸해주지않으면 자바스크립트가 함수를 기다려주지않아서 더 복잡한 코드들이 필요함

 

콘솔을 찍을땐 movies다 찍는것보단 필요한 데이터만 찍으면 좋다.

아래가 필요한 데이터만 찍었을때

 

하지만 이걸 좀 더 멋지게 찍어보자

이제 이 movies를 state안에 넣어보자

movie컴포넌트를 새로 생성해주었다.

이제 다시 App.js가서 랜더해준다.

App.js에서 movie import

import Movie from "./Movie";

2가지 방법이있는데 하나는 기존 render()에 movies.map 넣어주던지

renderMovies라는 다른 function을 만들면된다.

첫번째 방법을 사용하여 해보았다.

무야호~!