12. Practice Moive App - Parameters

아래 App.js 파일을 보면 Router를 사용하여 해당 경로에 맞게 화면이 보여지게 되는데

<Route path = "/movie/:id" element={<Detail />} /> 

Parameter는 :(콜론) + parameter값을 입력하면 Parameter로 사용되어진다.

 

 

Home.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_ration=8.8&sort_by=year`)).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  
  useEffect(()=>{

  //fetch 대신에 요즘 async-await를 사용한다.
    /* 
    fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.5&sort_by=year`)
    .then(response => {
      response.json()
      .then((json) => {
        setMovies(json.data.movies)
        setLoading(false);
      });
    }); 
    */

    getMovies();


  }, []);

  return (
    <div>

      {
        loading ? (<h1>Loading...</h1>) 
        : (
            <div>
              {movies.map((movie) => (
                <Movie 
                  key = {movie.id}
                  id = {movie.id}
                  coverImg = {movie.medium_cover_image} 
                  title = {movie.title} 
                  summary = {movie.summary} 
                  genres = {movie.genres} 
                />
              ))}
            </div>
          )
      }

    </div>
  );
};

export default Home;

 

API를 통해 데이터를 받아온 후 

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

Moive.js 파일을 import가 되었다.

 

Movie.js 파일에 데이터를 넘기기 위해 useState() 함수를 통해 movies 변수를 활용하여 

map 함수 내에서 id, coverImg, title, summary, geners를 보낸다.

 

Movie.js

import PropTypes from "prop-types";     //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!
import {Link} from "react-router-dom";

function Movie({id, coverImg, title, summary, genres}){
    return(  
        <div>
            <div>
                <img src = {coverImg} alt={title}/>
                <h2><Link to={`/movie/${id}`}>{title}</Link></h2>
                <p>{summary}</p>
                <ul>
                {genres.map((g) => 
                    (<li>{g}</li>)
                    )}
                </ul>
            </div>
        </div>
  );
};

Movie.prototype = {
    id : PropTypes.number.isRequired,
    coverImg : PropTypes.string.isRequired,
    title : PropTypes.string.isRequired,
    summary : PropTypes.string.isRequired,
    genres : PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;

 

Visual Studio Code 툴 내 터미널에서 npm install react-router-dom 명령어를 실행하여 react-router-dom를 설치한다.

import {Link} from "react-router-dom";

react-router-dom를 import를 하면 

<h2><Link to={`/movie/${id}`}>{title}</Link></h2>

해당 부분에 링크를 만들 수 있다.

 

App.js

import {
  BrowserRouter as Router,
  Route,
  Routes
} from "react-router-dom";

import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {

  // 누군가 만들어 놓은 컴포넌트를 잘 사용하면 된다.
  // Swith(Routes)가 하는 역할은 Route를 찾는 것인데 Route는 URL을 의미한다.
  // 사용자가 "/" 경로에 있으면 Home Route를 랜더링한다.

  return <Router>
    <Routes>
      <Route path = "/movie/:id" element={<Detail />} />
      <Route path = "/" element={<Home />} />
    </Routes>
  </Router>; 
}



export default App;

 

앞서 Visual Studio Code 툴 내 터미널에서 npm install react-router-dom 명령어를 실행하여 react-router-dom를 설치했기 때문에 react-router-dom를 활용할 수 있다.

 

import Home from "./routes/Home";
import Detail from "./routes/Detail";

Home.js와 Detail.js를 import한다.

 

react-router-dom를 설치 후

import {
  BrowserRouter as Router,
  Route,
  Routes
} from "react-router-dom";

위의 코드를 import를 한다.

 

react-router-dom를 import 했기 때문에

<Router></ Router> , <Route> </Route>, <Routes> </Routes> 

태그를 사용할 수 있다.

 

<정리>

최초 실행 시 App.js가 코드가 실행되고

<Route path = "/" element={<Home />} />

<Route path = "/movie/:id" element={<Detail />} />

path가 "/"일때는 Home.js를 통해 영화 목록이 보여지게 되고

영화 목록 타이틀을 클릭하면 "/moive/:id" 경로로 이동하게 되는데

Home.js 파일에서 받은 파라미터를 통해 Movie.js 파일에서 id 값을 받아왔고

Link는 <Route path = "/movie/:id" element={<Detail />} /> 로 Detail.js 파일로 이동하고

상세 페이지 API를 불러오는데 해당 상세 페이지는 id값에 의해 구분되어 보여진다.