[React] 라우팅 - Route, Link

CSR(Client Side Routing)

리액트의 라우터는 기본적으로 CSR를 기반입니다.

기본적으로 페이지별로 이동을 하게 되면 해당 페이지에 대한 문서 정보를 요청해야 하는데 라우팅을 이용하게 되면 새로운 문서를 요청하지 않더라도 링크를 클릭하여 URL을 업데이트하여 해당 페이지에 해당되는 데이터를 렌더링 하여 화면에 보여주는 것입니다.

이때 다음으로 보여줄 페이지에 대해서 CSS 및 JS 코드들을 재평가할 필요가 없어서 조금 더 빠르게 화면 이용이 가능합니다. 또한 애니메이션 기능을 통해서 더 역동적으로 활용할 수 있습니다.

 

react-router-dom 설치하기

라우팅 기능을 이용하기 위해서는 react-router-dom이라는 모듈을 설치해 주어야 합니다.

npm i react-router-dom@6

---

라우터를 이용하다 보면 사용하는 게 바로 Route와 Link입니다.

Route를 통해 어떤 경로에 어떤 데이터를 보여줄지 설정을 하고

Link를 통해 해당 경로로 이동할 수 있습니다.

하지만 이 기능을 사용하기 위해서는 index.js 혹은 TS 기반이라면 index.tsx에서 설정 하나를 해주어야 합니다.

🔻변경 전 코드

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode
    <App />
  </React.StrictMode>
);

🔻변경 후 코드

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

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

react-router-dom에서 BrowserRouter를 import 시켜주고  BrowserRouter 모듈로 App모듈을 감싸주는 것입니다.

 

이렇게 설정을 마쳤다면 이제 App.js/ App.tsx에 가서 Route와 Link를 이용할 수 있습니다.

import {Routes, Route, Link} from "react-router-dom";
import Comp1 from './Comp1';
import Comp2 from './Comp2';
import Comp3 from './Comp3';
import Comp4 from './Comp4';
const App: React.FC = () => {
  return (
    <div className="App">
      // Link 사용하기
      <div>
        <Link to="/">HOME</Link>
        <Link to="/about">About</Link>
      </div>
      // Route 사용하기
      <Routes>
        <Route path="/" element={<Comp1></Comp1>}></Route>
        <Route path="/about" element={<Comp2></Comp2>}>
          <Route path="member" element={<Comp3></Comp3>}></Route>
          <Route path="location" element={<Comp4></Comp4>}></Route>
        </Route>
      </Routes>

    </div>
  );
};

Route와 Link를 사용하기 위해 react-router-dom에서 Routes와 Route, Link를 import 시켜주고 원하는 위치에 코드를 작성해 주면 되는데요. 

 

Route

Route는 말 그대로 해당 경로에 어떤 화면을 보여줄지 설정해 주는 모듈입니다.

path 해당되는 경로를 입력해 주면 해당 경로에 진입했을 때 element에 작성한 컴포넌트를 보여주는 것입니다.

 

중첩된 경로(Nested Routes)

우리가 사용하다 보면 만나는 경로 중에 ["/about/location"], ["/about/contact"]와 같이 앞의 공통된 경로를 가지고 맨 뒤에 다른 경로를 작성하는 경우가 존재하는데요. 이런 경우 작성하는 방식은 두가 지가 있습니다.

const App: React.FC = () => {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Comp1></Comp1>}></Route>
        // ver1
        <Route path="/about" element={<Comp2></Comp2>}>
          <Route path="member" element={<Comp3></Comp3>}></Route>
          <Route path="location" element={<Comp4></Comp4>}></Route>
        </Route>
        // ver2
        <Route path="/about" element={<Comp2></Comp2>}>
        <Route path="/about/member" element={<Comp3></Comp3>}>
        <Route path="/about/location" element={<Comp4></Comp4>}>
      </Routes>
    </div>
  );
};

위 코드를 봤을 때 두 가지 버전의 차이가 뭐가 있을까요?

예시 이미지를 준비해 왔습니다.

Ver1로 작성을 하게 되면 <Comp2> 안에 <Comp3>, <Comp4>가 존재하고 Comp2를 갖고 있는 상태에서 Comp3과 Comp4가 로딩되고 반면에  Ver2로 작성을 하면 각각의 페이지가 로딩이 됩니다.

 

경로를 설정하다 보면 우리가 원한 방향이 아니라 사용자가 직접 입력하여 없는 경로에 들어오는 경우도 분명히 존재하는데요 이때 사용 되는 코드가 바로 아래의 코드입니다.

<Route path="*" element={존재하지 않는 요청 컴포넌트}></Route>

Route의 맨 마지막에  작성을 하며  if else문처럼 다양한 경로와 일치하는지 확인하고 마지막까지 경로가 존재하지 않는다면 맨 마지막에 작성하는 else처럼 동작하는 코드입니다.

예를 들어 /self라는 경로를 입력했다는 가정을 하고, 사이트에 접속을 하게 되면 설정된 /, /about, /about/locaiton, /about/contact에 해당되는 경로가 없어 맨 마지막 * 경우의 수에 들어가 존재하지 않는 컴포넌트가 로딩이 되는 것입니다.

Link

링크는 사용자가 클릭하여 다른 페이지로 이동할 수 있는 요소로 총 두 가지 종류가 있습니다 바로 Link와 NavLink인데요. 이 두 가지의 차이는 바로 active 설정이 있냐 없냐입니다.

사용방식은 아주 간단합니다.

<Link to="경로">경로이름</Link>
<NavLink to="경로" className={({isActive})=> isActive? "active" : ""}>경로이름</NavLink>