Movie Rendering, map()

...
import Movie from "./Movie";

class App extends React.Component{
state = {
  isLoading: true,
  moives: []
}
getMovies = async () => {
   const {data: {data: {movies}}} = 
         await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating");
   this.setState({movies, isLoading: false})
}
componentDidMount(){
  this.getMovies();
}
render(){
    const { isLoading, movies } = this.state;
    return(
      <div>
      {this.state.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>
    ) 
  }
}
export default App;

첫 render(=mount)가 되면 처음에 div태그에 "Loading" text가 뜬다 .
이후 componentDidMount가 실행되면서 data를 가져오고, 가져온 이후 setState를 이용해 data를 state에 추가하고, isLoading을 false로 바꿈에 따라 map함수가 호출되어 Movie태그를 return한다.
Nomad Coder YTS Proxy 주소

map() method 반환

• .map()메서드에서 {}중괄호를 사용할때는 return을 사용한다.

<div>{this.state.isLoading ? "Loading" : movies.map(movie => {
        console.log(movie);
        return <Movie 
        key={movie.id}
        id={movie.id}
        year={movie.year}
        title={movie.title}
        summary={movie.summary}
        poster={movie.medium_cover_image}
        />
      })}
      </div>

• .map() method에서 ()소괄호를 사용할때는 return을 사용하지 않는다.
  (소괄호에는 요소만 들어가야한다.)

<div>{this.state.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>

참고자료