⚛️React Training - section06 : react-router-dom

이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. 

 

import { BrowserRouter, Routes, Route } from "react-router-dom"

import Home from "./routes/Home";

import Detail from "./routes/Detail";

export default function SubApp() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />}></Route>

        <Route path="/movie/:id" element={<Detail />}></Route>

      </Routes>

    </BrowserRouter>

  )

}

 

강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 방식도 기존과는 다르다. element를 사용해서 해당 페이지간 이동할 컴포넌트를 연결해주면 된다. path는 url에 전달할 path값을 부여하는 코드이다. 두 번째 Route의 path에 있는 /movie/:id는 다음 포스팅에서 다룰 것이다. 

이렇게 컴포넌트들을 열결했고 해당 페이지를 이동하는 코드를 작성해 볼 것이다. 기존 js에선 html의 a태그를 사용해서 해당 페이지로 이동 할 수 있었지만 react에선 react-router-dom에서 제공해주는 Link라는 컴포넌트를 사용할 것이다. 아래 코드를 살펴 보자.

Movie.js

 

import PropTypes from "prop-types";

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

export default function Movie({ id, cover_image, title, summary, genres }) {

  return (

    <div>

      <img src={cover_image} />

      <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,

  cover_image: PropTypes.string.isRequired,

  title: PropTypes.string.isRequired,

  summary: PropTypes.string.isRequired,

  genres: PropTypes.arrayOf(PropTypes.string).isRequired

}

 

Movie 내부 컴포넌트에 fetch를 이용해서 받아온 정보의 영화 제목을 클릭하면 해당 영화 정보의 세부내용이 보이게 할 것이다. 그렇게 하기 위해서는 영화 제목에 link를 걸면 된다. 이전에 사용했던 a태그를 이용한 것과 같은 방식이다. 그렇게 클릭시 해당 영화 정보의 세부 내용 페이지로 넘어간다. 

해당 페이지는 리액트 라우터가 렌더링이 되는 원리를 확인 할 수 있는 포스팅이다.

리액트 라우터와 서버사이드 렌더링 · GitBook

* 리엑트 공식문서

시작하기 – React

* Recat Router 공식문서

Feature Overview v6.22.1 | React Router

[React] react-router 동작 원리 간단히 알아보기

---

router가 구체적으로 어떻게 동작하는지 파악해보자. 

생활코딩 router로 따로 뺄 것

<BorwserRouetr>

react-router 패키지에 속해 있는 <Router>컴포넌트를 래핑 한 컴포넌트를 래핑 한 컴포넌트이다. <BrowserRouter>컴포넌트는 <Router>컴포넌트를 렌더링 할 때 Props로 history 객체를 전달한다. 해당 history 객체를 HTML5 history API기반으로 브라우저에서 쉽게 내비게이션 기능을 구현할 수 있도록 각종 API를 제공하는 역할을 수행한다. History API를 간단하게 설명하자면 History API는 방문 기록을 메모리 상에 스택의 형태로 관리한다.

[JavaScript] HTML5 History API, history 패키지 (feat. react-router-dom)