[React] React Router 란?

How Can I Change View Regarding to URL(How to use React Router)?

 

 

[Programming] SPA(Single Page Application)이란? 장점과 단점

 

React Router란?

 

SPA라 하더라도 한 개의 페이지만 사용하는 것은 아닙니다. Header, Navigator, Footer 처럼 중복되는 컴포넌트를 제외하더라도 사용자 정보, 컨텐츠 정보, 컨텐츠 세부정보 등의 컴포넌트들의 페이지 주소를 다르게 구성해야 할 필요가 있습니다.

서로 다른 컴포넌트들의 주소에 따라 컴포넌트 배치를 변경하는 작업을 라우팅(Rounting)이라고 합니다. 경로에 따라서 컴포넌트를 변경하는 작업으로 데이터가 출발점에서 도착점 까지 도착할 수 있는 경로들을 구성하는 Rounting작업을 의미합니다.

React에서는 자체적으로 Router 기능이 포함되어 있지 않습니다. 개발자가 주소별로 다른 컴포넌트를 Display 해야 하는 번거로움이 있습니다. React SPA Router를 위해 가장 많이 사용하는 외부 모듈은 React Router 입니다.

 

 

ReactRouter를 사용하기 위해서는 먼저 npm을 이용해 설치를 해줘야 합니다. 2022년 5월 9일 기준으로 가장 최신 버전은 V6.3.0입니다.

// React Router Install
$ npm install react-router-dom

// 특정 버전 React-Router Install
$ npm install react-router-dom@6.3.0

 

React Router 주요 컴포넌트

 

React Router에는 크게 3가지 기능을 담당합니다. 라우팅 기능과 경로 매칭 기능 그리고 경로 변경 기능을 내장하고 있습니다. 이 기능을 담당하는 모듈은 크게 4가지로 분류됩니다.

①<BrowserRouter> : 라우터 역할을 담당합니다. 새로고침을 하지 않더라도 새로운 컴포넌트를 렌더링 해주는 기능을 담당합니다.

② <Routes><Route> : 경로를 매칭해줍니다. 경로가 일치하는 컴포넌트를 렌더링하게 됩니다. Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정합니다.

③ <Link> : 경로를 변경해줍니다. 기존 HTML의 <a>태그가 새로고침을 통해 처음부터 렌더링을 수행한다면 <Link> 컴포넌트는 페이지 전환을 방지하는 기능을 내장하고 있습니다. 즉 새로고침을 하지 않더라도 해당 페이지의 소스를 렌더링 하게 됩니다.

React Router 컴포넌트를 사용하기 위해서는 import 해주면 됩니다. 

 

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

import logo from './logo.svg';
import { BrowserRouter, Switch, Routes, Route, Link } from 'react-router-dom';
import './App.css';

function Home(){
  return (
    <div>
      <h1>This is Home</h1>
      <h3>Home is ...</h3>
      <h3>Home is ...</h3>
      <h3>Home is ...</h3>
    </div>
  )
}

function MyPage(){
  return(
    <div>
      <h1>This is MyPge</h1>
      <h3>MyPage is ...</h3>
      <h3>MyPage is ...</h3>
      <h3>MyPage is ...</h3>
    </div>
  )
}

function Dashboard(){
  return(
    <div>
      <h1>This is Dashboard</h1>
      <h3>Dashboard is ...</h3>
      <h3>Dashboard is ...</h3>
      <h3>Dashboard is ...</h3>
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/mypage">Mypage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        <Routes>

        
        	{/* exact 키워드는 해당 경로와 정확히 일치하는 path만 찾아서 렌더링 해줍니다. 만약
            exact가 없다면 '/'로 시작하는 모든 경로의 컴포넌트를 렌더링하게 됩니다.*/}
         
          <Route exact path="/" element={<Home/>}>
            
          </Route>
          <Route path="/mypage" element={<MyPage/>}>
          
          </Route>
          <Route path="/dashboard" element={<Dashboard/>}>
          
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

※ react-router-dom v6 에서는 더이상 Switch 모듈을 사용하지 않습니다. 대신 Routes 모듈을 사용합니다.