리액트9 영화사이트 만들기/React Router (react-router-dom)

npm i react-router-dom@5.3.0

react-router-dom v5 설치

npm install -- 업데이트

 

구조

 

index.js 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

 

APP.js

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/movie/:id">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
    );
}

export default App;

- import필수 

<Switch>를 통해 route를 찾음

route는 url를 의미.route를 찾으면 컴포넌트를 렌더링

<Route path="/movie/:id"> 

경로 매개변수(파라미터)를 포함한 경로를 나타냄. 콜론을 사용하여 매개변수를 정의하며, 이 매개변수는 url에서 동적으로 변하는 값을 나타낸다. 예를들어 /movie/123과 같이 /movie/ 다음에 숫자가 오는 경우, 숫자 부분이 id 매개변수의 값이됨.

 

 

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 response = await fetch (
            `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
        );
        const json = await response.json();
        setMovies(json.data.movies);
        setLoading(false);
        console.log(json)
    }

    useEffect( ()=> {
        getMovies();
    },[])

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

    );
}

export default Home;

 

Movie.js

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

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

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

export default Movie;

a태그 -> 페이지 전체가 다시 실행됨

react의 Link -> 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

react의 router는 다이나믹(동적) URL를 지원한다.

 

Detail.js

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

function Detail(){
    const [loading, setLoading] = useState(true);
    const [datail, setDetail] = useState("");
    const {id} = useParams();
    const getMovie = async() => {
        const json = await(
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        console.log('json',json.data.movie)
        setDetail(json.data.movie)
        setLoading(false);
    }
    useEffect( ()=> {
        getMovie();
    },[])

    return (
        <div>
          {loading ? <h1>로딩중...</h1> : null }
            <p>{datail.id}</p>
            <p>{datail.rating}</p>
            <p>{datail.title}</p>
            <p>{datail.id}</p>
            {datail && (
            <ul>{datail.genres.map( (item) => (
                <li key={item}>{item}</li>
            ))}
            </ul>
            )}
        </div>
    )
}

export default Detail;

라우터 사용 시 useParams 훅을 사용하여 파라미터 정보를 가져와서 활용한다. import필수