Router

유희준·2023년 5월 2일

Router 란

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다.

현재 페이지에서 다른 페이지로 넘어갈 때 어떻게 해야할까요?

웹페이지를 만들 때 하나의 페이지만이 아니라 예를 들어 마이페이지, 상품페이지 등 다양한 페이지로 이동해야 할 때가 있습니다. 이때 화면에 따라 주소도 달라지게 되는데요. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅(Routing) 이라고 합니다.

react를 사용한 rounter를 배워보도록 하겠습니다.

React Router

개발환경 구축하기

터미널을 열고 다음 명령어를 실행하여 simpleroute 디렉토리에 React 프로젝트를 생성합니다. 실행 후 npm start를 통해 실행 결과가 잘 나오는지 확인해 주세요.

px create-react-app@latest simpleroute
cd simpleroute
npm start

Create React App 프로젝트가 잘 생성되었다면 이제 React Router를 설치할 차례입니다.
아래 명령어를 실행합니다.

npm install react-router-dom@^6.3.0

위에 라이브러리가 제대로 설치되었다면 package.json 파일의 dependencies항목에 react-router-dom이라는 라이브러리가 등록된 것을 확인할 수 있습니다.

이후 App.js상단에 밑에 라이브러리를 작성합니다.

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

라우트 준비하기

페이지를 표시하는 컴포넌트 Home, MyPage, Dashboard를 만들어봅시다. App.js 하단에 아래와 같이 작성해 주세요.

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

메뉴 만들기

페이지를 표시하는 컴포넌트를 만들었고, 각 컴포넌트로 이동할 메뉴를 제작합니다. 메뉴 제작을 위해 <ul> 요소와 <li> 요소를 이용합니다.

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

주소에 따른 페이지 뷰 다르게 만들기

각각에 컴포넌트 주소를 다르게 설정합니다.
-Home -> "/"
-MyPage -> "/mypage"
-Dashboard -> "/dashboard"

BrowserRouter

function App () {
  return (
    <BrowserRouter> // 브라우저 라우더를 바깥에 작성하면서 덮어준다.
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

reactDom의 렌더 단계에서는 밑에와 같이 작성.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Routes, Route

경로를 매칭할 때 사용.

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
        <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
   </BrowserRouter>
  )
}

export default App;

Link

경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

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

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

export default App;