React Router

! react-router-dom@5.3.0

 

React Router - Router, Switch, Route

 

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

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

 

1. react-router-dom의 BrowserRouter, Switch, Route 태그를 통해 URL과 컴포넌트를 연결 한다.
2. Route 태그의 path 속성에 URL을 적고 component에 import에서 불러온 컴포넌트를 집어 넣는다.
3. React Router 적용은 보통 최상위 컴포넌트에 설정한다.

 

---

 

React Router - Link

 

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}></img>
            <h2><Link to={`/movie/${id}`}>{title}</Link></h2>
            <p>{summary}</p>
            <ul>
            {genres.map((g)=><li key={g}>{g}</li>)}
            </ul>
      </div>
    )
}

Movie.propTypes = {
  coverImg : PropTypes.string.isRequired,
  title : PropTypes.string.isRequired,
  summary : PropTypes.string.isRequired,
  genres : PropTypes.string.isRequired
}

export default Movie;

 

1. Home Component에서 Movie Component에 인자로 id, coverImg, title.. 등을 보내 화면에 출력해주는 컴포넌트이다.
2. title에 Link를 걸어 더 자세한 영화의 내용을 볼 수 있게 구현했다.
3. Link 태그의 to 속성을 이용해 이동 하고자 하는 URL을 입력 한다.

 

* a태그와 Link태그의 차이점

1. <a href="" ></a>
: 페이지를 재렌더링하여 이동한다. 즉, 새로운 데이터를 다시 불러옴.

2. <Link to=""></Link>
: 싱글페이지 어플리케이션 답게 바뀌어야 하는 화면만 재렌더링 되고 나머지 데이터는 그대로 유지된다. 고로 속도 향상 면에서 a태그보다 더 좋음.

 

---

 

React Router - useParams

 

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

function Detail(){
    const {id} = useParams();

    const [isLoading, setLoading] = useState(false);
    const [movieInfo, setMovieInfo] = useState("");
    const getMovies = async () => {
        const movieDetail = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json();
        await setMovieInfo(movieDetail.data.movie);
        await setLoading(true);
        
    }

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

    return (
        <div>
            { isLoading ? <div>title : {movieInfo.title_english}</div> : 
                "Wait Please"
            }
        </div>
        
    )
}

export default Detail;

 

1. useParams 함수를 통해 Detail Component가 전달 받은 파라미터를 가져올 수 있다.
2. 여기서도 title만 보여주지만 .. 일단 파라미터 받는 방법을 배웠다는거에 의의를 두자 ..