Movie Rendering, map()

Hyun·2021년 9월 6일
0

리액트 [Movie App]

목록 보기
6/10
...
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>

참고자료

profile
better than yesterday

1개의 댓글

comment-user-thumbnail
2022년 8월 2일

Para baixar o OZOPLAY APK, você deve ativar a https://apkgenk.com/ozooplay/ opção de origem desconhecida em suas configurações de dispositivos Android. Esta opção permite que seu telefone baixe aplicativos Instage que não estão disponíveis na Google Play Store. Você pode fazer isso manualmente em versões mais antigas do Android. Em seguida, faça o download e instale o aplicativo OZOPLAY. Você poderá jogar seus jogos favoritos no seu dispositivo Android. Você também pode conferir as atualizações mais recentes do aplicativo.

답글 달기