[React] 영화 목록

App.js : router를 render하는 곳

router는 URL을 보고있는 component임.

Link : 새로고침 없이도 다른 페이지로 가게 해주는 것

npm i gh-pages : 결과물을 github pages에 업로드 할 수 있게 해주는 나이스한 패키지

npm run build : 우리 웹사이트의 production ready code를 생성하게 됨

production ready : 코드가 압축되고 모든게 최적화된다는 의미

components/Movie.js

import PropTypes from "prop-types"
import { Link } from "react-router-dom"

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

Movie.propTypes = {
    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;

 

routes/Detail.js

import { useEffect, useState } from "react";
import {useParams } from "react-router-dom"

function Detail() {
    const {id} = useParams(); //id를 알고있으니까
    const [loading, setLoading] = useState(true);
    const [movie, setMovie] = useState();
    const getMovie = async() => { //API로부터 정보를fetch해올 수 있다
        const json = await ( 
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        console.log(json.data.movie);
        setMovie(json.data.movie);
        setLoading(false);
    };
    useEffect(() => {
        getMovie();
    }, []);
    return (
        <div>
            {loading ? <h1>Loading...</h1> : (
                <div>
                    <h1>{movie.title_long}</h1>
                    <div>
                        <img src={movie.medium_cover_image} alt={movie.title}></img>
                    </div>
                    <h3>rating : {movie.rating}</h3>
                    <h3>runtime : {movie.runtime}</h3>
                    <ul><h4>
                        {movie.genres.map((genre) => (
                        <li key={genre}>{genre}</li>
                       ))}
                    </h4></ul>
                </div>
            )}
        </div>
    );
}

export default Detail;

 

routes/Home.js

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

function Home() {
    const [loading, setLoading] = useState(true);
    const [movies, setMovies] = useState();
    const getMovies = async() => {
      const response = await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
      )
      const json = await response.json();
      setMovies(json.data.movies);
      setLoading(false);
    }
    useEffect(() => {
      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;

 

App.js

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Detail from "./routes/Detail";
import Home from "./routes/Home"

function App() {
  return (
  <Router> {/* 이 안에 들어가는 것들은 유저에게 보여주고 싶은 것들 */}
    <Routes> {/* 한번에 하나만 렌더링 시키기 위함 */}
      <Route path="/movie/:id" element={<Detail />} />
      <Route path={`${process.env.PUBLIC_URL}/`} element={<Home />} />
    </Routes>
  </Router>
  );
}
export default App;

 

 

 

git에 올리는건

package.json Scripts부분에 이거 추가하고

"deploy": "gh-pages -d build",

"predeploy": "npm run build"

맨 마지막 괄호 위에서 

},

"homepage": "https://깃아이디.github.io/레포지토리 이름"

}

이런식으로 끝내면 됨

 

그리고 작동이 안돼서

<Route path={`${process.env.PUBLIC_URL}/`}

이 코드를 추가해줬었고

이거를 <Router basename={process.env.PUBLIC_URL}로 해도 된다고함