[React] 4. Router

1 . Router

- 컴포넌트들을 모두 분리하고 App에서는 페이지간 이동을 가능하게 하고 싶다. 

- <Router> 안에서 <Switch>문을 사용하여 path가 다른 <Route>간 이동을 가능하게 한다. 

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

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

export default App;

 

2. Movie 컴포넌트 분리

- 컴포넌트를 출력할때 필요한 정보들은 props로 전달받아서 처리한다. 

- propstype을 사용하여 전달받을 props를 명확히 해준다. 

import PropTypes from "prop-types";

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

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

export default Movie;

 

3. url 전달받아서 페이지 전환하기 

- Link to 로 url을 보내고

: HTML <a>처럼 전체 페이지를 다시 로딩하지 않고 바로 페이지를 옮겨준다.

- useParams 로 url을 받아온다

: 보내진 url을 바로 가져올수 있다. 

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

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <div>
        <img src={coverImg} alt={title}/>    
        <h2><Link to={`/movie/${id}`}>{title}</Link></h2> // url을 보내는 함수
        <p>{summary}</p>
        <ui>
          {genres.map( g => (
            <li key={g}>{g}</li>
          ))}
        </ui>
      </div>
    </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;

import { useParams } from "react-router-dom";
import { useEffect } from "react/cjs/react.development";

function Detail(){
    const { id } = useParams(); // 전달받은 url을 가져오는 함수
    const getMovies = async () => {
        const json = await (
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
        ).json();
        console.log(json);
    };
    useEffect(()=> {
        getMovies();
    }, []);
    return <h1>Deatil</h1>;
}
export default Detail;