라우터 활용 및 영화 상세 페이지 제작

react-clone/src/Movie.js

@@ -1,34 +1,23 @@
-import { useEffect, useState } from "react";
+import {
+    BrowserRouter as Router,
+    Routes,
+    Route,
+    Link
+} from "react-router-dom";
+import Home from "./routes/Home";
+import Detail from "./routes/Detail";
+
 
 function Movie() {
-    const [loading, setLoading] = useState(false);
-    const [movies, setMovies] = useState([]);
-    const getMovie = async () => {
-        const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year");
-        const json = await response.json();
-        setMovies(json.data.movies)
-        setLoading(true)
-    }
-    useEffect(() => {
-        getMovie()
-    }, [])
-    console.log(movies)
-    return (
-        <div>
-            {loading ? null : <h1>loading</h1>}
-            <div>
-                {movies.map((movie) => (
-                    <div key={movie.id}>
-                        <img src={movie.medium_cover_image}></img>
-                        <h2>{movie.title}</h2>
-                        <p>{movie.summary}</p>
-                        <ul>
-                            {movie.genres.map((genres) => <li key={genres}>{genres}</li>)}
-                        </ul>
-                    </div>
-                ))}
-            </div>
-        </div>
-    )
+    return <Router>
+        <Routes>
+            <Route path="/Movie/:id" element={<Detail />}></Route>
+            <Route path="/" element={<Home />}></Route>
+        </Routes>
+    </Router>
 }
-export default Movie;
+export default Movie;
+
+/*Routes 컴포넌트 안에는 Route 컴포넌트만 존재해야함
+=> element 속성 안에 컴포넌트를 넣어줘야됨
+*/

react-clone/src/components/Moviesub.js

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types"
+import { Link } from "react-router-dom";
+function Moviesub({ id, coverImg, title, summary, genres }) {
+    return (
+        <div>
+            <img alt="" src={coverImg}></img>
+            <h2>
+                <Link to={`/Movie/${id}`}>{title}</Link>
+            </h2>
+            <p>{summary}</p>
+            <ul>
+                {genres.map((genres) => <li key={genres}>{genres}</li>)}
+            </ul>
+        </div>
+    )
+}
+
+Moviesub.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 Moviesub;

react-clone/src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 //import App from './App';
 import Coin from './Coin';
 import Movie from './Movie';
+import Home from './routes/Home';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

react-clone/src/routes/Detail.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+function Detail() {
+    const [loading, setLoading] = useState(true)
+    const [detail, setDetail] = useState("");
+    const { id } = useParams();
+    const getMovie = async () => {
+        const response = (await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`));
+        console.log(response)
+        const json = await response.json()
+        console.log(json)
+        setDetail(json.data.movie)
+        setLoading(false)
+    }
+    useEffect(() => {
+        getMovie()
+    }, [])
+    return (
+        <div>
+            <h1>Detail</h1>
+            {loading ? null : <div>
+                <img alt="" src={detail.medium_cover_image} />
+                <div>{detail.title}</div>
+                <p>{detail.description_full}</p>
+            </div>}
+        </div>
+    )
+}
+export default Detail;

react-clone/src/routes/Home.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import Moviesub from "../components/Moviesub";
+
+function Home() {
+    const [loading, setLoading] = useState(false);
+    const [movies, setMovies] = useState([]);
+    const getMovie = async () => {
+        const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year");
+        const json = await response.json();
+        setMovies(json.data.movies)
+        setLoading(true)
+    }
+    useEffect(() => {
+        getMovie()
+    }, [])
+    return (
+        <div>
+            {loading ? null : <h1>loading</h1>}
+            <div>
+                {movies.map((movie) => (
+                    <Moviesub
+                        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;