React 실습 -9 : Fetching Movies from API

보통 JavaScript에서 data를 fetch 하는 방법은 fetch를 사용하는 거야

fetch보다 더 좋은 방법이 있는데 바로 Axios !

 

여기서는 axios를 사용해보자!

axios가 어떻게 동작하냐면, 겁나 쉬워

 

axios는 마치 fetch 위에 있는 작은 layer야

예를 들면, axios는 초콜릿 주위의 멋진 땅콩 같은 거야!

 

하지만 우리는 axios를 설치해야 해..

근데 겁나 쉬워

 

터미널에 한 줄만 추가해주면 돼!

npm install axios

끝!

 

좋아 좋아!!

 

이제 우리가 쓸 API에 대해서 얘기할게

우리는 YTS에서 만든 API를 사용할 거야

yts.lt에 접속해서 제일 밑에 API 클릭하고 List Movies를 클릭하면

이렇게 나오는데

https://yts.mx/api/v2/list_movies.json 을 url에 복붙 하면!

이렇게 나오지 않쥬?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이건 크롬 확장 프로그램을 써서 그래!

JSONView 확장 프로그램 고고!

 

내용을 대충 보면 저번에 했던 food array랑 비슷하지!!!

 

어쨌든 우리는 이 list를 사용할건데

사실 YTS는 뭔가 불법적인 영화를 업로드 하고 있어!

그래서 YTS의 API가 항상 변해, 매번 url이 변경 돼

니콜라스 형이 가만 볼 수 없지!

YTS proxy API를 만들어버렸엌ㅋㅋㅋ

 

우리는 그냥 노마드 코더의 주소를 이용하면 돼! 짱짱

주소를 가르쳐줄게

https://yts-proxy.now.sh/list_movies.json

그래서 그냥 이거 쓰면 돼 ㅎㅎ

 

그래도 니콜라스형이 만들어줬는데 알고 써야지 ...

 

어쨌든 아까 axios 다운받은게 다 됐겠지?!

그럼 import 하고 axios.get으로 api를 가져오자!

어렵다고 생각하지마! 나도 get으로 가져오는지 몰랐어

그냥 이런게 있구나 하고 넘어가~ 필요할 때 알면 되는거지~ 자주 쓰다보면 익혀지겠지!

 

이렇게 작성하고 런하면 !

Loading이라고 뜨지? 이건 중요하지 않아

중요한건 우리가 api를 가져온거야

 

개발자도구 키고 Network를 보면

이렇게 axios가 뭔가를 요청하고 있어~

그럼 이제 data를 잡아와야겠지?

그래야 state에 사용할 수 있으니까!

 

바로 고!

getMovies를 만들고 component가 mount 됐을 때 getMovies 호출!

여기서 우리는 JS한테 getMovie function이 로드 되야 하니까 기다려줘야 하잔아?

 

그럼 이렇게 쓰면 돼 !

await를 추가하게 되면 '이 함수는 비동기야' 라는걸 인지 시켜

즉 '너는 이걸 기다려야 해' 라는 말이야! 신기방기!

 

 

또 복습!

application은 render한다!

 

처음에는 isLoading: true

그래서 화면에 Loading을 볼거야!

 

이제 application이 mount된 후, 우리는 getMovies function을 호출할거야

getMovies는 axios.get을 사용해!

근데 axios.get은 완료되기까지 시간이 조금 필요하기 때문에 await을 넣었어!

문제는 우리가 async를 사용하지 않으면 await을 사용 할 수 없어

 

그래서 async도 추가!

정리하면 async await를 사용해서 JS한테 getMovies function에게 조금 시간이 필요하고

우리는 그걸 기다려야 한다는 것을 말하는거야!

 

이게 없다면 JS는 function을 기다리지 않겠지?

 

 

이번 글은 여기까지!!

 

모르는게 있으면 같이 해결해보자..

화이팅!!

 

 

참조: nomadcoders.co