[React] React Router로 페이지 이동하기

https://reactrouter.com/en/main

Home v6.26.2 | React Router

❓ React Router

React Router 는 리액트에서 URL을 기반으로 컴포넌트를 나누고 페이지를 관리할 수 있게 해주는 라이브러리다.

리액트는 기본적으로 SPA(Single Page Application) 구조를 따르기 때문에

페이지를 이동하더라도 전체 페이지가 새로 로드되는 것이 아니라, URL 이 바뀌면서 화면에 보여주는 컴포넌트만 교체된다.

 

이러한 구조에서 React Router 를 사용하면, URL 이 바뀔 때 그 URL 에 맞는 특정 컴포넌트만 변경해서,

마치 새로운 페이지로 이동하는 것처럼 자연스러운 전환을 만들어낼 수 있다.

예를 들어, /home 경로에서는 Home 컴포넌트를, /about 경로에서는 About 컴포넌트를 보여주는 방식으로!

 

++) SPA?

SPA 는 단일 페이지 애플리케이션을 뜻한다.

즉, 페이지가 하나라는 뜻 → HTML 파일이 하나라는 뜻

 

---

❓ 왜 쓸까?

우리가 원래 웹페이지를 만들 때, 어떻게 만들었는지 떠올려 보자.

기존에는 각 페이지마다 별도의 html 파일을 만들어서 사용하고, a 태그를 통해 이동할 수 있었다.

페이지를 이동할 때마다 서버에 요청을 보내서 새 HTML 파일을 받아오고, 이 과정에서 페이지가 전환될 때마다 전체 페이지가 새로고침되었다.

 

이러한 방식에는 몇 가지 문제가 있는데,

1. 페이지를 이동할 때마다 전체 페이지가 다시 로드되기 때문에 사용자 경험이 저하되고 로딩속도가 느려짐

2. 코드의 재사용이 어려움 → 모든 페이지에 반복해서 header, footer 등을 넣어줘야 하기 때문

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="./about.html">소개</a></li>
    <li><a href="./contact.html">연락처</a></li>
  </ul>
</nav>

 

 

React 는 기존 방식과는 다르게, 하나의 HTMl 파일만 가지고 있다.

그래서 페이지 이동을 하면 실제로 다른 페이지로 이동하는 것이 아니라! URL 경로에 맞게 특정 컴포넌트만 보여주는 방식이다.

React Router 는 이런 SPA 구조에서 페이지 이동을 자연스럽게 보이도록 관리해 주는 도구인 것이다.

 

이걸 사용하면 뭐가 좋냐

1. 페이지 이동할 때 전체 화면을 다시 로드하지 않아서 빠른 사용자 경험을 제공할 수 있음

2. 재사용 가능한 컴포넌트로 페이지를 구성해 유지보수에 용이

3. 코드 스플리팅을 통해 성능 최적화 가능 (필요한 컴포넌트만 로드)

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</Router>

 

---

❗ 설치 방법

npm install react-router-dom localforage match-sorter sort-by

yarn add react-router-dom localforage match-sorter sort-by

 

❗ 기본 사용 방법 (v6.4)

createBrowserRouter 와 RouterProvider 를 사용하여 라우터를 설정한다.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

- createBrowserRouter: 이 함수는 라우터 객체를 생성한다. 배열 형태로 여러 라우트를 정의할 수 있다.

- path: URL 경로

- element: 해당 경로에서 렌더링 할 컴포넌트

- RouterProvidor: createBrowserRouter 로 생성한 라우터 객체를 애플리케이션에 적용하여 URL 에 맞는 컴포넌트를 표시해 주는 역할

 

---

💡 참고 문헌

https://reactrouter.com/en/main/start/tutorial

Tutorial v6.26.1 | React Router

https://developer.mozilla.org/ko/docs/Glossary/SPA

단일 페이지 애플리케이션 (Single-page application, SPA) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://developer.mozilla.org/ko/docs/Glossary/Code_splitting

Code splitting (코드분할) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN