[ReactJS] ReactJS로 영화 웹 서비스 만들기 (12) - Rendering

이제 API에서 data를 가져왔으니 console.log를 찍어보자

구조를 보면,
data > data > movies 인것을 확인할 수 있다.
따라서 movies.data.data.movies를 출력해보면

이렇게 20편의 movie들을 볼 수 있다.

하지만 이건 뭔가 깔끔하지 않다. es6를 사용해보자. (es6 : ECMA script의 새로운 버전)

잘 나온다.

 

이제 이 movies를 state안에 넣을 것이다.

this.setState({movies.movies})

앞의 movies는 state의 movies[] 이고 뒤의 movies는 axios에서온 movies이다.

하지만 JavaScript가 이해하는건 똑같기때문에 다음과 같이 단축해서 쓸 수 있다.

this.setState({movies})

이제 이게 먹혔는지 isLoading으로 검사해보자.

this.setState({ movies, isLoading: false });

 

이제 axios호출이 끝나면 setState에 의해 movies를 저장하고 isLoading이 false가 되어 '대기' 텍스트를 나타낸다.

 

좋다. 이제 movies를 렌더링해보자.

먼저 Movies.js 파일을 생성한다. import React from 'react'는 필수이다.

 

Movies 컴포넌트는 state를 필요로하지 않는다.
state가 필요없다는 말은 이 컴포넌트가 class 컴포넌트가 될 필요가 없다는 뜻이다.
따라서 function 컴포넌트로 만들자.

 

중요한것은 우리가 얻어 올 props를 찾는것이다. 
먼저 API 로부터 응답을 살펴보자.

movies의 props가  생각보다 많다.

propTypes를 설정하기 전에 list Movies의 문서를 살펴보니 rating으로 정렬을 할 수 있을거같다.

 

Examples와 같이 App.js의 URL을 다음과 같이 바꾸면 된다.

https://yts-proxy.now.sh/list_movies.json?sort_by=rating

 

이제 propTypes를 설정해보자.
medium_cover_image 는 poster라고 썼다.

Movie.PropTypes라고 쓰면 안됨.

App.js에서 Movies컴포넌트를 사용하려면 당연히 export default Movie를 해줘야한다.

 

이제 렌더링을 할 차례이다.

렌더링을 하는 방법은 2가지가 있다.
맵을 사용하거나, 새로운 render 메서드(ex. renderMovies() )를 만들거나.

이제 state에 movies를 넣는다.

const { isLoading, movies } = this.state;

만약 movies를 변수로 만들지않고 사용할려면 쓸때마다 이렇게 길게 써야한다. 귀찮겠지?

this.movies.state.movies

 

이제 render 함수를 완성시키자. <Movie> 컴포넌트를 사용한것은 import를 했기 때문이다.

화면에 Title이 잘 나오는것을 확인할 수 있다.

 

하지만 콘솔을 보니 에러가 2개가 있다.

위의 에러는 

poster={movie.midium_cover_image}에서 오타가 나서 인식을 못한경우이다.

아래의 에러는

각각의 child는 유일한 key값을 가져야만 한다고 한다. 따라서key prop을 넣어보자.

 

더 깔끔하게 하자. return을 지우는 대신 {}를 ()로 바꿔주었다.
()는 암시적으로 리턴해준다.

 

완벽하다.

 

이제 API로부터 데이터를 가져왔다.

다음 포스트는 가져온 데이터를 활용하며 웹페이지를 이쁘게 꾸며볼것이다.