react-router-dom

hyj3363·2022년 5월 3일
0

react-router-dom 은 컴포넌트의 모음집이다.

App.js에 컴포넌트를 지정해줄때 Router을 이용해서 경로도 지정해줄 수 있다.

나의 경우 terminal에 'npm i react-router-dom@5.3.0' 를 명령해주었다.

Router을 이용한 App.js

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

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

export default App;

BrowserRouter, Switch, Route 를 이용해서
'localhost:3000/' 에는 메인화면인 Home.js 를
'localhost:3000/movie' 에는 영화의 상세정보를 볼 수 있는 Detail.js를 지정해주었다.

중간에 Switch를 사용한 이유는 한 번에 하나의 Route만 렌더링하기 위해서다.
Router는 여러개의 Route를 렌더링할 수 있기 때문이다.

<react-router-dom 버전6>

현재 라우터를 배우고 있는 시점에서 라우터가 버전6까지 출시되었다..
6에서는 더이상 Switch를 사용하지 않는다길래 다시 코드를 변경해보았다.

router v6 수정된 App.js

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

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

export default App;

Switch의 네이밍이 Routes로 바뀌게 되었다.
따라서 Switch대신 Router과 Route 사이에 Routers를 추가로 작성해줘야한다.

기존 html에서는 'a href="/"'를 이용해서 경로를 이동할 수 있었지만
한가지 단점이 있다면 웹페이지 전체를 새로고침 한다는 것이다.
Link는 브라우저의 새로고침 없이도 다른 페이지로 이동시켜주는 컴포넌트이다.

Movie.js

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

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>
  );
}

이런식으로 title에 Link를 부여해주면 title을 클릭했을 때 새로고침없이 바로 웹페이지를 이동시켜준다.

파일의 경로는 아래와 같다.

profile
Front-end Web Developer

0개의 댓글