[React JS] Movie App 03 - React Route

React Router

- 페이지를 전환한다.

https://v5.reactrouter.com/web/guides/quick-start

Declarative routing for React apps at any scale | React Router

 

 

터미널을 켜서 install 해줬다.

 

이제 코드를 바꾸거나 이동시켜야하는데 스크린 단위로 생각해야하기 때문이다.

우리는 route 별로 생각해야한다. 스크린, 페이지, route 부르고 싶은대로 부르자

 

 

내가 만드는 app은 home route를 두고 여기선 모든 영화를 Movie route를 만들어 하나의 영화를 보여줄 것이다.

 

react project 폴더에서 src 폴더 안에 routes 라는 폴더와 components 폴더를 따로 만들어주었다.

그리고 App 안의 내용을 전부 Home.js로 옮겨줬다.

 

이제 App.js는 더 이상 영화를 보여주지 않고 대신에 App.js는 router를 render한다.

router는 URL을 보고있는 component고 우리가 localhost:3000에 있다면 Home component를 보여준다

우리가 localhost:3000/movies 이렇게 접속한다면 router은 Detail component를 보여줄 것이다.

react-router-dom을 사용하기 위해서는 몇가지를 import 해야한다.

 

 

App.js

코드를 이렇게 만들어준다.

import{
  BrowserRouter as Router,
  Switch,
  Route,

} from "react-router-dom";

function App() {
  return null;
}
export default App;

라우터에는 hash router, browser router 두가지 종류가 있다.

 

swith는 route를 찾는 일을 하는데 route는 url을 의미한다.

route를 찾으면 컴포넌트를 렌더링한다.

function App() {
  return <Router>
    <Switch>
      <Route>
      	<Home/>
      </Route>
    </Switch>
  </Router>;
}

route안에 컴포넌트를 써줄 건데

예를 들어서 2개의 route를 만든다면, 하나는 유저가 홈화면으로 갈 떄 사용할 route이다.

path가 "/"라면 홈 컴포넌트를 보여준다 

 

'Switch' is not exported from 'react-router-dom'.

=> 버전이 바뀌어서 그런가 이런 오류가 났다.

 

이렇게 바꿔주었더니 잘 된다!

Switch를 Routes로 Home 컴포넌트를 element로 넣어줬다.

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element= {<Home />}>
          
        </Route>
      </Routes>
    </Router>
  );
}

 

상세페이지도 똑같이 추가해준다.

import {
  BrowserRouter as Router,
  Route,
  Routes

} from "react-router-dom";

import Home from "./routes/Home";
import Detail from "./routes/Detail";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/movie" element= {<Detail />}></Route>
        <Route path="/" element= {<Home />}></Route>
      </Routes>
    </Router>
  );
}
export default App;

 

 

Browser router와 hash router는 URL 생김새에 차이가 있따.

Browser router는 우리가 평소 보는 url 같다

Hash router는 뒤에 /#/ 처럼 뭐가 하나 더 붙는다. 

 

 

이제 하고싶은건 route에서 route로 이동하는 방법이다.

유저가 영화제목을 클릭하면 이동하도록 하고싶다.

단순 html이면 a link="/movie"로 했을 것이다. 되기는 하지만 페이지 전체가 재실행된다.

react의 Link 컴포넌트를 이용해서 재실행을 막고싶다

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

 

function Movie({coverImg, title, summary, genres}) {
    // App.js으로부터 movie 정보를 받는다
    return (
        <div>
            <img src={coverImg} alt={title} />
            <h2>
                <Link to="/movie">{title}</Link>
            </h2>
            <p>{summary}</p>
            <ul>
                {genres.map((g) => (
                    <li key={g}>{g}</li>
                ))}
            </ul>
        </div>
    );

}

 

 

React Router는 다이나믹 URL을 지원해주기도 한다.

다이나믹하다는건 url에 변수를 넣을 수 있다는 의미이다. 이걸 이용해서 각 영화의 상세페이지를 만들어 줄 것이다.

/movie/:id 여기에 ":" 써주는게 중요하다. :가 없으면 "id"라는 텍스트 자체로 보내진다.

props 로 id도 받을 수 있도록 추가한다. Home에서 주고  Movie에서 받고

 

App.js

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

 

Home.js

 

Movie.js

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

function Movie({id, coverImg, title, summary, genres}) {
    // App.js으로부터 movie 정보를 받는다
    return (
        <div>
            <img src={coverImg} alt={title} />
            <h2>
                <Link to={`/movie/${id}`}>{title}</Link>
            </h2>
            <p>{summary}</p>
            <ul>
                {genres.map((g) => (
                    <li key={g}>{g}</li>
                ))}
            </ul>
        </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;

 

 

React Router에서 제공하는 함수중 url에 있는 값을 반환해주는 useParams라는 함수가 있다.

useParams로 현재 페이지의 url 맨 뒤에 붙은 id값을 가져온다.

아까 :id 이렇게 쓴 부분에서 id가 변수이다. x라는 변수에는 { id:1111 } 이런식으로 데이터가 들어있다.

function Detail(){
    const x = useParams()
    return <h1>Detail</h1>
}

export default Detail;

 

useParams를 사용하면 react router는 바로 이 변수의 값을 넘겨준다.

https://yts.mx/api/v2/movie_details.json?movie_id= 

https://yts.mx/api/v2/movie_details.json?movie_id

 

await는 async 함수 내부에 있지 않으면 사용할 수 없다.

함수로 만들어 호출한다.

import { useEffect } from "react";
import { useParams } from "react-router-dom";
function Detail() {
    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);
    };
    useEffect(() => {
      getMovie();
    }, []);
    return <h1>Detail</h1>;
  }
  export default Detail;

 

 

이제 영화 제목을 클릭하면 이렇게 id가 있는 페이지로 갈수있다.