#7.4 Movie App part Two

• key는 react.js안에서만, map안에서 component들을 render할 때 사용함
  
  • props로써 우리의 component로 넘겨 component들이 받아서 사용하게 해줌
• react router : 페이지를 전환하는 역할
• app.js는 router를 render -> router은 url을 보고 있는 컴포넌트
• Select and Ctrl + D 하면 vs코드 한번에 선택됨
• Movie 컴포넌트 따로 만들어서 import 해온 뒤 prop으로 가져옴

import { useEffect, useState } from "react";
import Movie from "./components/Movie";

function App() {
 return null;
}

export default App;

app.js

import { useEffect, useState } from "react";
import Movie from "./components/Movie";

function Home(){
    const [loading, setLoading] = useState(true);
    const [movies, setMovies] = useState([]);
    const getMovies = async () => {
      const json = await (await fetch('https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year')).json();
      setMovies(json.data.movies);
      setLoading(false);
    };
    useEffect(() => {
      getMovies();
    }, []);
    console.log(movies);
    return <div>{loading ? <h1>Loading...</h1> :
      (<div>
        {movies.map(movie => 
        <Movie //props로써 우리의 component로 넘겨 component들이 받아서 사용하게 해줌
          key={movie.id}
          coverImage={movie.medium_cover_image}
          title={movie.title}
          summary={movie.summary}
          genres={movie.genres}
        />)}
      </div>
      )}
    </div>;
}

export default Home;

home.js