*** 노마드코더에서 무료로 강의해주는 ReactJS 강의를 보고 개인적으로 정리한 내용입니다. ***
일반적으로 JS에서 data를 fetch하는 방법은 fetch()를 사용하는 것이다.
하지만 더 나은 방법이 있는데, axios가 그것이다.
(Axios는 fetch 위에 있는 작은 layer이다. 추후에 다시 공부할 내용이다.)
이 프로젝트에서는 YTS라는 API를 사용할 것이다.
YTS는 영화를 불법 토렌트 형식으로 다운받는 사이트라서 URL이 지속적으로 바뀐다.
그래서 니꼬쌤이 고정시킨 URL을 사용할 것이다.
해당 URL에 들어가보자.
스크롤을 보면 알 수 있겠지만 방대한 양의 정보를 얻을 수 있다.
하지만 이 API를 직접 다루기 위해서는 사용할 data를 잡아야 한다(강의에서는 grab the data라고 표현했다.)
이 과정에서 axios를 사용할 것이다.
일단 코드의 내용을 보기 보다는
axios를 이용해 원하는 api를 get한 것만 확인해보자.
위를 실행하고 개발자 도구를 통해 네트워크를 확인하면 아래와 같다.
Axios가 무언가를 요청하고 있음을 볼 수 있다.
그렇다면 이제 코드를 자세히 보자.
강의 내용에 따르면,
Axios.get은 항상 빠른 함수는 아니다.
심지어는 조금 느리다고까지 표현했다.
따라서, getMovies()를 async한 함수(비동기적인 함수)라고 선언해주고 getMovies()가 실행완료되기까지 시간이 필요하다고 명시해주어야 한다.
Async()와 await을 이용해 표현한 것을 확인할 수 있다.
우선 async()를 이용해 해당 함수가 어떤 task를 기다려야 한다고 알려주고,
Axios 앞에 await을 추가해 axios를 기다려야 한다고 알려준다.
위 코드의 전체적인 흐름을 파악해보자.
우선 application이 render하면
- state가 정의된다. isLoading = true가 되고 movies라는 빈 배열이 생성된다.
- render()에서 isLoading이 참이기 때문에 화면에 “Now Loading”이 출력된다.
- application이 성공적으로 mount됐기 때문에 getMovies 함수가 호출된다.
- getMovies()는 async하게 실행된다. 즉, axios.get이 완료될 때까지 기다린다.(await)
그렇다면 우리가 얻어온 api에 대해 알아볼 필요가 생긴다.
위와 같이 console.log를 이용하여 쌩으로 출력해보자.
우리가 우선적으로 사용할 data는 movie의 목록이다.
그리고 movie의 목록은 아래와 같이
data – data – data – movies에 해당한다.
따라서, 아래와 같이 Movies.data.data.movies를 출력하면
console.log(movies.data.data.movies;
이렇게 20개의 영화 목록을 뽑아낼 수 있다.
근데 저렇게 무식하게 써놓으면 neat하지 못하므로,
위처럼 해당 api의 data – data – movies로 표현하면 더 깔끔하다.
(근데 솔직히 난 여기까지는 생각하지 못했을 듯 ..)
이제 우리가 할 것은 getmovies에서의 movies를,
즉 api에서 axios로 get한 movie의 list를, state에서의 movies[]에 넣어주는 것이다.
또한 movie list를 모두 가져오면 loading이 끝나기 때문에 이 부분도 수정해야 한다.
This.setState({movies, isLoading : false});로 작성하면 된다.
성공적으로 api에서 movies를 가져온다면
위와 같은 창을 볼 수 있을 것이다!
하지만 loading이 완료되었을 때 우리가 보고 싶은 것은 고작 “We are ready”와 같은 문장이 아니다.
영화의 정보에 대해 알고 싶은 것이므로,
추가적인 js파일(movies.js)을 하나 생성해서 이어가보자.
다음과 같이 PropTypes를 이용하여
React 컴포넌트에 prop으로 넘어오는 입력값들이 어떤 타입을 가져야하는지 정의할 수 있다.
Function component의 인자로 props의 특정 값을 가져올 때는 중괄호로 감싸줘야한다!
이제 마지막으로 App.js에서 해당 내용을 render해주면 된다.
Render할 내용은 App class의 state 내부의 movies[]라는 data이다.
따라서
Map을 이용하여 깔끔하게 작성해주었다.
