[React] 라우터 구현(react-router-dom)

react는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서 router 라이브러리를 별도로 설치해 사용해야 한다.

 

터미널에 다음 명령어를 입력해 react-router-dom 라이브러리를 설치한다.

npm install react-router-dom

 

 

라우터 사용법은 아래와 같다.

 

react-router-dom에서 BrowserRouter, Routes, Route를 import한다. BrowserRouter로 App 전체를 감싸고 Routes로 url에 따라 달라지는 컴포넌트(Route)들을 감싼다. Routes로 감싸지 않은 컴포넌트는 모든 페이지에 보여지게 된다. Route는 path 속성에 경로, element 속성에 해당하는 컴포넌트를 지정한다.

 

또한 /day/:day와 같이 경로에 :를 사용하여 파라미터를 설정할 수 있다. 

// App.js

import Header from "./component/Header";
import DayList from "./component/DayList";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />} />
          <Route path="/day/:day" element={<Day />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

 

Route로 지정한 페이지에 접근하려면 Link를 사용하면 된다. 원래 웹페이지에서 링크를 보여줄 때 a 태그를 사용하는데, a 태그는 클릭 시 페이지를 새로 불러오기 때문에 사용하지 않는다. Link 컴포넌트에는 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

// DayList.js

import { Link } from "react-router-dom";
import dummy from "../db/data.json";

export default function DayList() {
  return (
    <ul className="list_day">
      {dummy.days.map((day) => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>
      ))}
      <li></li>
    </ul>
  );
}

 

Day 컴포넌트에서 day라는 이름으로 파라미터를 받아 활용 가능하다.

// Day.js

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";

export default function Day() {
  const day = useParams().day;
  const wordList = dummy.words.filter((word) => word.day === Number(day));

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map((word) => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

 

 

사전에 정의하지 않은 경로로 접근하는 경우 EmptyPage로 이동하게 해보자. Routes 맨 아래에 path가 *인 Route를 정의하면 상단에 위치하는 Route 들 중 일치하는 Route 가 없을 경우 해당 경로로 이동한다.

// App.js

import Header from "./component/Header";
import DayList from "./component/DayList";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import EmptyPage from "./component/EmptyPage";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />} />
          <Route path="/day/:day" element={<Day />} />
          <Route path="*" element={<EmptyPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

// EmptyPage.js

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

export default function EmptyPage() {
  return (
    <>
      <h2>잘못된 접근입니다.</h2>
      <Link to="/">돌아가기</Link>
    </>
  );
}