Rendering the Movies

지난 포스팅에 이어 영화를 랜더링해보겠다.

 

api를 통해 얻어온 movies를 console.log해보면 이렇게 data를 확인 할 수 있다.

이번엔 movies.data.data.movies를 콘솔창에 띄워보자

이렇게 각 영화의 id~ url~ title~등등 정보를 확인 할 수 있다.

 

이제 render method에서  isLoading이 false로 바뀌면 ready를 리턴하도록 되어 있는데

movie data를 리턴하도록 바꿔보자.

 

Movie.js파일을 하나만들고 역시 react와 Prop-types를 import 해주자.

그리고 movie component는 state가 필요없으므로 굳이 class component로 만들 필요가 없다

 

function component로 만들어보자.

Movie 컴포넌트에 argument로  API object에서 가져올 인자들을 넣어주고

propTypes로 제대로 내가 원하는 prop이 넘어갔는지 확인 하는 코드를 작성하고 export 했다.

다시 App.js로 넘어와서

api doc에 sort_by=rating을 이용해 rating순서로 정렬해주기로 한다.

이제 isLoading이 false로 바뀌면 ready의 문구를 출력하는 대신

map함수를 이용해서 Movie 컴포넌트에 각각의 prop을 지정해 넣어준다.

이때 각각의 child는 unique한 key prop을 가져야 하므로 key값을 영화 id값으로 지정해 줬다.

브라우저를 refresh해주면~!~! 이렇게 Movie컴포넌트에서 return한 타이틀이 생성된다.

 

영화 API로부터 데이터를 가져와 isLoading을 setState를 통해 변화를 주고 

async await을 통해 데이터를 가져올때까지 기다리고 데이터가 오면 rendering해줬다.

 

현재는 타이틀만 뿌려줬고 각 prop을 이용해 html을 꾸며보자.