[ReactJS] React Router - ReactJS 로 영화 웹 서비스 만들기 (10)

 

React Router 를 이용해 페이지 전환 구현하기

 

 

---

 

 

#7.5 React Router

 

영화 제목을 클릭하면 Detail 페이지로 라우팅 되도록 구현할 것이다.

 

 

React-Router-Dom 설치

npm i react-router-dom@5.3.0

 

이번 실습을 위해서는 버전 설정을 해주지 않으면 오류가 날 수 있다.

-> 버전에 따라 구현 방식이 다름

 

참고) 공식 튜토리얼 v5

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

Declarative routing for React apps at any scale | React Router

 

 

컴포넌트 분리

 

components - Movie.js

routes - Home.js, Detail.js

로 분리

 

App.js : router 를 render 하는 역할

Home.js : loading, 데이터 fetch 후 전달의 역할

Movie.js : props 를 받아서 실제로 그려지는 부분

Detail.js : Movie 의 상세 정보 페이지 (추후 구현 예정)

 

---

 

App.js

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

 

BrowserRouter : 일반 url 처럼 생김 -> 보통 많이 사용
HashRouter : # 이 붙는다

 

Switch : 조건을 만족하는 첫 번째 Route 찾기 -> 한 번에 하나의 컴포넌트만 렌더링 되도록 함

- 없을 경우, "/" 를 입력하면 "/", "/home", "/movie" 모두 한 페이지에 나타나게 됨

Route : path, component 지정

 

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

 

Home, Detail 컴포넌트 추가

 

 

App()

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

 

Router > Switch > Route > Component 순으로 작성

 

"/" 를 입력하면, Home 컴포넌트가 보이고

"/movie" 를 입력하면, Detail 컴포넌트가 보이게 된다.

 

---

Home.js

import Movie from "../components/Movie";

 

이전 시간의 App.js 와 유사하지만 Movie 컴포넌트를 이용해서 그리기

 

 

화면에 그려지는 부분

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

 

Movie 컴포넌트로

key, coverImg, title, summary, genres 를 넘겨줌

 

 

전체 코드

import { useState, useEffect } 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);
    }

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

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

export default Home;

 

---

 

Movie.js

import {Link} from "react-router-dom";

 

Link : 새로고침 없이 다른 페이지로 이동 가능

* a : 페이지 전체가 재실행됨 refresh

 

 

Movie()

function Movie({coverImg, title, summary, genres}) {
    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>
    )
}

 

props 로 coverImg, title, summary, genres 를 받아옴

 

title 을 클릭하면 detail 페이지로 넘어가도록 Link 설정

 

---

 

Detail.js

function Detail() {
    return (
        <h1>Detail</h1>
    );
}

export default Detail;

 

Detail 페이지는 다음 시간에 parameter 를 이용해서 구현할 것이다.

 

 

---

 

 

이렇게 기본적인 라우팅은 구현할 수 있게 됐다.

버전에 따라 구현 방식이 다르니 주의하도록.