React - React Router 사용하기

1. 개요

지금까지 나는 Vanilla JS를 사용해서 프로젝트를 했기에 페이지 전환시 약간의 로딩이 걸리는 것은 당연하다고 생각했다. 하지만 리액트는 달랐다. 

Router를 사용해서 여러개의 페이지를 마치 한개의 페이지 처럼 로딩없이 빠르게 이동이 가능하다는 것을 알았다. 

 

이것이 바로 SPA(Single Page Application)의 가장 큰 장점이다. 

 

2. 사용 방법

2-1 이동할 페이지를 만든다.

페이지들

나는 한개의 폴더를 만들고 그 안에 사이트에 필요한 페이지들을 모두 넣어 놨다.

const New = () => {
  return (
    <div>
      <h1>New</h1>
      <p>이곳은 일기를 작성하는 곳입니다.</p>
    </div>
  );
};
export default New;

각각의 페이지에는 페이지가 이동됐을 시 나오는 컴포넌트를 생성해준다.

 

2-2  Link 컴포넌트를 생성하여 SPA방식으로 만든다.

Router를 사용할 폴더 생성

폴더를 한개 생성하고 그 안에 Router를 사용할 파일을 만든다. 

React-Router에서 제공하는 Link라는 컴포넌트를 사용해서 SPA방식 즉, CSR방식으로 페이지를 이동시켜 줄 것이다. 

import { Link } from "react-router-dom";		// React-router에서 제공하는 컴포넌트

const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>Diary</Link>
      <br />
      <Link to={"/new"}>NEW</Link>
      <br />
      <Link to={"/edit"}>EDIT</Link>
      <br />
    </>
  );
};

export default RouteTest;

자바스크립트로 페이지 전환을 할때는 <a href="/HOME" ></a> 태그의 태그를 사용했다면 

리액트 라우터는 <Link to={"/HOME"}> 태그를 사용해서 페이지를 이동한다.

 

2-3 App.js에 적용하기

브라우저의 URL과 리액트의 리액트 앱을 연결시켜주는 BrowserRouter 컴포넌트를 App이 리턴하는 요소들을 감싸준다.

import "./App.css";
import { BrowserRouter} from "react-router-dom";

import RouteTest from "./components/RouteTest";
import Home from "./pages/Home";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
import New from "./pages/New";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

그리고 URL이 바뀔 부분을 <Routes></Routes>로 감싸준다.

이후 <Route></Route> 컴포넌트를 사용해서 실질적으로 바뀔 URL경로와 컴포넌트를 매핑 시켜준다. 

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import RouteTest from "./components/RouteTest";
import Home from "./pages/Home";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";
import New from "./pages/New";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary/:id" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

 

<Route>의 요소 중 path는 경로를 의미하고 , element에는 이동할 컴포넌트를 넣어준다.