[React] React Router 정리

개요

프로젝트 코드를 분석하는데 Router에서부터 머리가 띵해졌다. 화면을 변경하는 건 알겠는데 도대체 어떤 원리로? 어떻게? 정리해야겠지.

 

1. React Router란?

React Router는 React 애플리케이션에서 클라이언트 측 라우팅(Client-Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리이다.

 

React는 기본적으로 단일 페이지 애플리케이션(SPA, Single Page Application)이고, URL이 변경되더라도 페이지 전체를 새로고침하지 않고도 컴포넌트만 변경할 수 있도록 설계되어 있다.

 

여기서 React Router를 사용한다면 사용자가 특정 URL로 이동할 때 해당 URL에 맞는 컴포넌트를 렌더링한다.

 

1-1. React Router 필요성

-> React 자체로 라우팅 기능을 제공하지 않기 때문에, 라우팅을 구현하기 위해서는 외부 라이브러리를 사용해야 한다.

-> 기존의 HTML에서는 <a> 태그를 사용해 페이지를 이동할 수 있었다.

<a href="/about"> About Page </a>

-> 하지만, 이 방식은 페이지를 새로고침하면서 서버에 요청을 보내, SPA의 장점을 살리기 어렵다.

-> 그래서 React Router를 사용해 브라우저의 히스토리를 조작해 경로만 변경하고, 필요한 부분만 다시 렌더링하는 방식이 훨씬 효율적이다.

 

장점

1) 페이지 새로고침 없이 경로 변경

-> 클라이언트 측 라우팅을 통해 더 빠른 네비게이션과 원활한 사용자 경험을 제공할 수 있다.

 

2) 컴포넌트 기반 라우팅

 

3) 동적 경로 지원

-> URL 파라미터를 사용해 사용자별 페이지를 동적으로 렌더링 할 수 있다.

 

4) 네비게이션 및 리다이렉트 기능

-> <Link>, useNavigate, <Navigate> 등의 기능을 통해 직관적으로 페이지 이동을 관리할 수 있다.

 

5) 중첩 라우트 및 보호된 라우트 지원

-> 복잡한 애플리케이션에서도 효율적으로 라우트를 구성할 수 있다.

 

2. 주요 Router

React Router에는 BrowerRouter와 HashRouter라는 두 가지 주요 라우터가 있다.

 

2-1. BrowserRouter

-> History API를 사용해 URL을 관리한다.

-> URL이 깔끔하게 유지된다.

   # https://example.com/about

-> 서버에서 모든 경로를 지원해야 하기 때문에, 서버에서 올바른 경로를 설정해야 한다.

-> SEO(검색 엔진 최적화)가 중요한 경우 사용된다.

 

import { BrowserRouter } from "react-router-dom";

<BrowserRouter>
  <App />
</BrowserRouter>

 

* History API

-> 브라우저에서 페이지 탐색 기록을 조작할 수 있도록 제공하는 JavaScript API

-> 페이지를 새로고침하지 않고 브라우저의 주소를 변경, 뒤로 가기 & 앞으로 가기 기능

 

 

2-2. Hash Router

-> URL에 #(해시)를 포함해 경로를 관리한다.

   # https://example.com/#/about

-> #는 브라우저에서 서버로 전달되지 않기 때문에, 서버 설정 없이 라우팅이 가능하다.

-> 주로 정적 웹사이트에서 사용된다.

-> SEO가 중요한 웹사이트에서는 적합하지 않을 수 있다.

 

import { HashRouter } from "react-router-dom";

<HashRouter>
  <App />
</HashRouter>

 

 

3. 기본 사용법

일단 React Router의 핵심 컴포넌트는 다음과 같다.

 

: <BrowserRouter>

-> 애플리케이션의 라우팅을 관리하는 최상위 컴포넌트

 

: <Routes>

-> 여러 개의 <Route>를 감싸는 컨테이너

 

: <Route>

-> URL 경로에 따라 렌더링할 컴포넌트를 지정하는 요소

 

: <Link>

-> 페이지 간 이동을 위한 컴포넌트

 

: <Navigate>

-> 특정 URL로 리다이렉트 할 때 사용

 

npm install react-router-dom

# or

yarn add react-router-dom

 

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

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

-> BrowserRouter는 애플리케이션을 감싸고, 내부에서 Routes를 사용해 여러 개의 Route를 관리한다.

-> <Routes>는 여러 개의 <Route>를 포함할 수 있고, 각각의 Route는 특정 경로와 해당 경로에서 렌더링할 컴포넌트를 지정한다.

-> '/' 경로로 접근하면 <Home> 컴포넌트가 렌더링되고, '/about' 경로에서는 <About> 컴포넌트가 렌더링된다.

 

4. 동적 라우팅(Dynamic Routing)

React Router에서는 경로 변수(Parameters)를 사용해 동적 페이지를 만들 수 있다.

import { useParams } from "react-router-dom";

const UserProfile = () => {
  const { username } = useParams();
  return <h2>User Profile: {username}</h2>;
};

 

-> UserProfile이라는 컴포넌트를 만들었다.

 

* useParams

-> React Router에서 URL의 파라미터 값을 가져오는 Hook이다.

 

<Routes>
  <Route path="/user/:username" element={<UserProfile />} />
</Routes>

 

-> /user/ho 로 이동하면 "User Profile: ho"라는 내용이 화면에 출력된다.

 

5. 네비게이션과

5-1. <Link>를 사용한 네비게이션

-> React에서 페이지 이동을 할 때 <a> 태그를 사용하면 전체 페이지가 새로고침 되기 때문에, <Link> 컴포넌트를 사용해야 한다.

-> 사용자가 직접 클릭해서 페이지를 이동할 때 적합하다.

-> 네비게이션 메뉴, 사이드바 등의 구성 요소에서 주로 사용된다.

 

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

const Navigation = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
};

 

-> <Link to="/about"> About </Link>를 클릭하면 /about 경로로 이동한다.

 

: to

-> 이동할 경로 지정

 

: replace

-> true로 설정하면 이전 기록을 대체해 뒤로 가기가 불가느앟게 한다.

 

5-2. <Navigate>

-> 특정 조건에서 자동으로 페이지를 이동할 때 사용된다. (= 프로그래밍 방식의 이동)

 

import { Navigate } from "react-router-dom";

const ProtectedPage = ({ isAuthenticated }) => {
  return isAuthenticated ? <h1>Welcome!</h1> : <Navigate to="/login" replace />;
};

 

-> isAuthenticated가 false면 자동으로 /login 페이지로 이동한다.

 

5-3. useNavigate()

-> React Router에서 제공하는 Hook으로, 프로그래밍 방식으로 페이지 이동을 수행할 때 사용된다.

 

import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={() => navigate("/about")}>Go to About</button>
    </div>
  );
};

export default Home;