[React] Router를 사용해 페이지 이동하기!

 

기업과제를 하면서 'Link 태그를 써야하나..? 그냥 상황에 맞춰 컴포넌트에 데이터를 다르게 넘겨주면 되려나..?🤔' 헷갈렸던 순간이 있었다. 결과적으로는 후자의 방식으로 진행을 했지만 아무래도 라우터에 대한 이해가 부족하다고 판단되어 기본 예제를 통해 개념을 다시 잡아보기로 했다.

React에서의 페이지이동

라우팅?🤔

사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것.

예시

🛍 쇼핑몰 페이지를 만든다고 가정했을 때, 어떤 페이지들이 필요할까?

• 상품 목록 페이지
• 상품 상세 페이지
• 장바구니 페이지
• 마이 페이지
  ... 등

이처럼 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트를 분리하면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템이다.

⚙️ 설치

npm install react-router-dom

Router

프로젝트에 라우터를 적용할 때에는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용해 App 을 감싸준다.
BrowserRouter의 경우, Link 태그를 사용해 URL을 이동하고 HTML5의 History API를 사용해 페이지를 새로 불러오지 않고도 단순히 주소만 바꿔주며 컴포넌트들을 렌더링해준다.

src/index.js

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

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Routes와 Route

페이지로 사용할 컴포넌트들을 작성한 후, 사용자의 브라우저 주소 경로에 따라 원하는 컴포넌트를 보여주기 위해서 Route라는 컴포넌트를 통해 라우트 설정을 해주어야 한다.

이때, Route는 Routes컴포넌트 내부에서 사용되어야 한다.
Routes는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할을 한다.
Route는 다음과 같이 사용한다.

<Route path="경로 규칙" element={보여줄 컴포넌트명} />

💡 v5 ➡️ v6 업데이트 사항

1. exact 키워드 삭제
2. Swich ➡️ Routes 로 변경
3. component ➡️ element 로 변경

src/App.js

import { Route, Routes } from "react-router-dom";
import { Header } from "./Components/Header/Header";
import { Home } from "./Components/Home";
import { About } from "./Components/About";
import { Record } from "./Components/Record";
import { Articles } from "./Components/Articles";

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/record" element={<Record />} />
        <Route path="/articles" element={<Articles />} />
      </Routes>
    </div>
  );
}
export default App;

Link 컴포넌트

<Link> 는 HTML의 <a> 태그 처럼 사용자가 클릭하거나 탭을 통해 다른 페이지로 이동할 수 있게 해주는 요소이다.

리액트 라우터를 사용하는 프로젝트에서 <a>태그는 페이지를 새로 불러오기 때문에 사용하면 안되고 Link컴포넌트를 사용해야 한다.

Link컴포넌트는 다음과 같이 사용한다.

<Link to="경로">링크 이름</Link>

src/Components/Header.jsx

import React from "react";
import { Link } from "react-router-dom";
import "./style.css";

export const Header = () => {
  return (
    <>
      <header>
        <h1>
          <Link to="/">홈</Link>
        </h1>
        <ul>
          <li>
            <Link to="/about">about me</Link>
          </li>
          <li>
            <Link to="/record">이력</Link>
          </li>
          <li>
            <Link to="/articles">포트폴리오</Link>
          </li>
        </ul>
      </header>
    </>
  );
};

결과

중첩 라우트

위에서 쇼핑몰 페이지는 상품 목록 페이지와 상품 상세 페이지가 있다고 했었다.
경로를 임의로 작성해보면 /product 와 /product/1 의 형태가 되어야 할텐데 이건 어떻게 할 수 있을까?

src/App.js

import { Route, Routes } from "react-router-dom";
import { Header } from "./Components/Header/Header";
import { Home } from "./Components/Home";
import { About } from "./Components/About";
import { Record } from "./Components/Record";
import { Articles } from "./Components/Articles";
import { Article } from "./Components/Article";

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/record" element={<Record />} />
        <Route path="/articles" element={<Articles />} />
        <Route path="/articles/:id" element={<Article />} /> // ⭐️ 이 부분을 추가!
      </Routes>
    </div>
  );
}
export default App;

App.js에서 라우트를 추가하는데, 이때 path 부분에 파라미터를 설정해준다.

src/Components/Articles.jsx

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

export const Articles = () => {
  return (
    <div>
      <h2>포트폴리오</h2>
      <ul>
        <li>
          <Link to="/articles/1">포트폴리오 1</Link>
        </li>
        <li>
          <Link to="/articles/2">포트폴리오 2</Link>
        </li>
        <li>
          <Link to="/articles/3">포트폴리오 3</Link>
        </li>
      </ul>
    </div>
  );
};

src/Components/Article.jsx

import React from "react";
import { useNavigate, useParams } from "react-router-dom";

export const Article = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  const goBack = () => {
    navigate(-1);
  };
  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <p>Article {id}</p>
    </div>
  );
};

결과

만약, 각각의 포트폴리오 페이지에서 포트폴리오 목록을 보여줘야 한다면 어떻게 해야할까?
게시판에서도 게시물을 다 보고 스크롤을 밑으로 내려보면 게시물 목록이 나오는 경우가 종종있는데 그런건 어떻게 해야하는지도 알아보자!

src/App.js

import { Route, Routes } from "react-router-dom";
import { Header } from "./Components/Header/Header";
import { Home } from "./Components/Home";
import { About } from "./Components/About";
import { Record } from "./Components/Record";
import { Articles } from "./Components/Articles";
import { Article } from "./Components/Article";

function App() {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/record" element={<Record />} />
        <Route path="/articles" element={<Articles />}>
          <Route path=":id" element={<Article />} />
        </Route> // ⭐️ 코드 변경!
      </Routes>
    </div>
  );
}
export default App;

articles 경로를 가진 라우트로 파라미터 경로를 가진 라우트를 감싸준다. 즉, 파라미터 경로를 가진 라우트를 children으로 만들어준다.

src/Components/Articles.jsx

import React from "react";
import { Link, Outlet } from "react-router-dom";

export const Articles = () => {
  return (
    <div>
      <h2>포트폴리오 목록</h2>
      <Outlet /> // ⭐️ 추가!
      <ul>
        <li>
          <Link to="/articles/1">포트폴리오 1</Link>
        </li>
        <li>
          <Link to="/articles/2">포트폴리오 2</Link>
        </li>
        <li>
          <Link to="/articles/3">포트폴리오 3</Link>
        </li>
      </ul>
    </div>
  );
};

목록이 될 컴포넌트 안에서 <Outlet>컴포넌트를 사용해준다.
<Outlet>는 Route의 children으로 들어가는 JSX 엘리먼트를 보여주는 역할이다.

그럼 <h2>포트폴리오 목록</h2> 밑에는

<Route path=":id" element={<Article />} />

형태를 가진 엘리먼트가 보여지게되고 그 밑에 Articles에 해당하는 목록이 보여질 것이다.

 

결과

📚 참고

• 리액트 라우터 공식문서
• 벨로퍼트 React Router v6 튜토리얼