[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.1 Rendering the Movies

4.1 Rendering the Movies

const movies= await axios.get("https://ytsproxy.now.sh/list_movies.json");
console.log(movies);

• console.log(movies) 결과 , console에서 movies가 data-> data ->movies에 있는 것 알 수 있음
• console.log(movies.data.data.movies);
• movies에 바로 접근 가능
• ||

•   const {
      data:{
        data:{movies}
      }
    }= await axios.get("https://yts-proxy.now.sh/list_movies.json");
    console.log(movies);
  }

• movies에 바로 접근 가능
• axios에 가져온 이 movie들을 state에 넣어야함
• this.setState({movies:movies});
  ->{movies(state의 movies) : movies(axios에서 가져온 movies)}
• ||
• this.setState({movies});
• javascript가 이해하는 것은 같아서 단축해서 쓰기 가능

class App extends React.Component{
  state={ //지금의 isLoading 상태는 true
    isLoading:true ,
    movies:[]

  };

  getMovies=async()=>{ 

    const {
      data:{
        data:{movies}
      }
    }= await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
    this.setState({movies, isLoading:false});

  }
  componentDidMount(){ 
    this.getMovies();
  }
  render(){
    const{isLoading,movies}=this.state; //isLoading,movies 앞에 this.state 매번 붙일 필요 없어짐  
    return (
      <div>
        {isLoading
          ? "Loading..."
          : movies.map(movie => (
              <Movie
                key={movie.id}
                id={movie.id}
                year={movie.year}
                title={movie.title}
                summary={movie.summary}
                poster={movie.medium_cover_image}
              />
            ))}
      </div>
    );
  }
}     // map에 무조건 return 있어야 함 

//<Movie.js>
import React from "react";
import PropTypes from "prop-types";

function Movie({id,year,title,summary,poster}){
    return <h4>{title}</h4>;
} //function component의 인자로 props의 특정 값만 가져올 때 {}으로 꼭 감싸기 

Movie.propTypes={
    id:PropTypes.number.isRequired,
    year:PropTypes.number.isRequired,
    title:PropTypes.string.isRequired,
    summary:PropTypes.string.isRequired,
    poster:PropTypes.string.isRequired
};

export default Movie;