axios: How to use

(1) axios로 Data 가져오기

axios는 데이터를 가져올 수 있도록 도와준다.

url 자리에 가져오고 싶은 데이터의 실제 url을 넣으면 된다.

url의 끝에 "?sort_by=rating"을 넣으면 rating을 기준으로 정렬된다.

componentDidMount가 실행되는 동안, 즉 data를 가져오는 동안 좀 시간이 걸릴 수도 있는데, 그걸 JS에게 알려줘야 한다.

async를 사용하는데, 이 과정에서 함수를 분리해줄수도 있다. async가 함수를 비동기로 만들어 주고

JS는 axios가 끝날 때까지 await했다가 나머지를 실행한다.

componenetDidMount가 실행되면 getMovies function이 실행되고

JS는 getMovies가 async function 인 것, await key Word를 사용하고 있는 것을 인식하여

axios가 끝날 때까지 기다린다.

🔽console.log(movies)를 하면 이런 결과가 나온다.

 

그 중에서 필요한 자료의 위치를 찾아서

console.log를 다시 해보면

원하는 자료만 얻을 수 있다.

 

ES6 문법을 사용해서 🔽 아래처럼 쓸 수도 있다.

state에서 만든 array에 axios로 가져온 data를 넣어준다.

this.setState({movies:movies})처럼 두 단어가 일치하는 경우에

🔽 ES6에서는 하나로 줄여쓸 수 있다.

---

(2) 가져온 Data 화면에 표시하기

Movie.js 파일을 생성한다.

가져올 data들의 propTypes를 적어주면 실수를 줄일 수 있다.

그리고 나서 App.js에 작성했던 부분 🔽"We are ready"를

🔽아래 처럼 수정해준다.

새로 작성한 Movie.js를 (import)가져오는 과정도 잊으면 안된다.

로딩 중이면 "Loading..."이라는 메세지를 보여주고

로딩이 끝나면 Movies의 각 항목(item)의 id, year, title, summary, poster 가 보여지게 된다.

각 항목마다 return해야 하기 때문에 map을 사용한다.

또한 보여질 정보가 실제 Data에서 위치가 어떤 지 적어줘야 한다.

#️⃣poster는 movie의 하위 항목 중에 medium_cover_image 항목에 있을 것이다.

---

+ 추가

React에서는 unique "key" prop가 필요하기 때문에

key prop를 추가해줬다. 이게 없으면 아래와 같은 error 메세지가 생긴다.