React Router

* React Router 사용법
(react-router-dom v6 / 버전5이랑 6랑 사용하는법 달라서,

package.json에서 "react-router-dom": "^6.4.3" 버전이 6버전인지 확인하고 사용하기)

 

 

1) 먼저 터미널에서 아래와 같이 리액트 라우터 설치 해주고

npm install react-router-dom@6

 

vs code에서 import해줌 (아래와 같이)       # 0

import {

  BrowserRouter,

  Routes,

  Route

} from "react-router-dom"

 

 

 

2)  BrowserRouter 안에 Routes 안에 Route가 들어가는 순서로 작성 # 1, # 2, # 3 

3) <Detail /> 또는 <Home /> Component를 Route element에 작성해주면, 

    path 부분에 입력하는 path에 따라서, 이동 할 수 있게 됨.

    예_ http://localhost:3000/  << 이거는 # 4번과 같이 <Home /> Component를 따라 이동,

    예_ http://localhost:3000/movie << 이거는 # 3번과 같이 <Detail /> Component를 따라 이동함

 

App.js

import React, {useEffect, useState} from 'react';
import { render } from "react-dom";
import {                                                 --- # 0
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Home from './routes/Home'
import Detail from './routes/Detail'

function App(){
 return (<BrowserRouter>                                  --- # 1
  <Routes>                                                --- # 2
   
    <Route path="/movie" element={<Detail />}>            --- # 3
    </Route>
   
    <Route path="/" element={<Home />}>                   --- # 4
    </Route>

 </Routes>
 </BrowserRouter>
 )}

export default App;

 

Home.js

import React, {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=8.8&sort_by=year`)
      const json = await response.json();
          setMovies(json.data.movies)
          setLoading(false); 
  }
  useEffect(() => {
          getMovies();
  },[])
  console.log(movies);
return <div> {loading ? <h1>Loading...</h1> 
        : 
          <div>
            {movies.map((movie) => (
           <Movie 
           key={movie.id}
           coverImg={movie.medium_cover_image} 
           title={movie.titme} 
           summary={movie.summary} 
           genres={movie.genres}/>
            ))}
            </div>
             }
             </div>
             
} 

export default Home

 

 

Movie.js

import PropTypes from 'prop-types';

function Movie({coverImg, title, summary, genres}){
  return  <div>
  <img src={coverImg} alt=""/>
 <h2>{title}</h2>
 <p>{summary}</p> 
 <ul>
   <li>
     {genres.map((g)=> 
     <li key={g}>{g}</li>)}
   </li>
 </ul>

 </div>
}

Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  coverImg: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;