[Frontend] React Router로 SPA에서 페이지 이동 구현하기

목차 (OPEN)

• 🧩  React Router는 왜 필요할까?
• ✅ SPA란
• 🛣️ React Router가 하는 일
• 🚀 React Router가 없으면 어떻게 될까?
• ✅ 결론
• 🔧 실제 라우팅 코드 예제

 

 

 

🧩  React Router는 왜 필요할까?

✅ SPA란

SPA (Single Page Application)는 말 그대로

하나의 HTML 파일로 구성된 웹 애플리케이션을 의미한다.

 

페이지를 이동해도, 실제로는 새 HTML 파일을 받아오는 게 아니라,

기존 HTML 안에서 JavaScript로 화면을 바꿔주는 방식인 것이다.

 

즉, 유저 입장에서는 '페이지가 이동한 것처럼' 보이지만,
실제로 브라우저가 페이지를 새로 불러오지는 않는다.

 

예를 들어 유저가 www.example.com/login에 에 접속하면,

기존 방식 (MPA, Multi Page Application)에서는 서버가 login.html을 새로 보내줬지만,

SPA에서는 이미 로딩된 index.html 안에서 React가 LoginPage 컴포넌트를 보여준다.

 

그리고 이것을 제어하는 게 바로 React Router 이다.

 

 

🛣️ React Router가 하는 일

React Router는 현재 브라우저 주소(URL)에 따라서

어떤 React 컴포넌트를 보여줄지 결정해준다.

 

👇 이렇게 생각하면 쉽다.

URL 주소	보여줄 React 컴포넌트
/	<MainPage />
/login	<LoginPage />
/products/11	<ProductDetail />

 

이것을 직접 제어하는 게 <Route> 컴포넌트이고,

이 전체 기능을 동작하게 해주는 컨테이너가 <BrowserRouter>이다.

 

 

🚀 React Router가 없으면 어떻게 될까?

React Router 없이 단순히 HTML의 <a href="/login">로그인</a> 처럼 링크를 사용하면 어떻게 될까?

👉 브라우저는 진짜로 서버에 /login 경로의 HTML 파일을 요청하게 된다.

 

하지만 이 방식은 페이지 전체가 새로고침되면서,

React 내부의 상태나 라우팅 정보가 모두 초기화되기 때문에

React 앱이 지향하는 SPA 구조와는 맞지 않는다.

 

 

✅ 결론

React Router는 SPA 구조에서

주소는 바뀌지만 페이지 전체를 새로고침하지 않고,

화면만 자연스럽게 전환되는 부드러운 사용자 경험을 가능하게 해주는 핵심 도구이다.

 

 

🔧 실제 라우팅 코드 예제

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

import MainPage from '@/pages/main/MainPage';
import LoginPage from '@/pages/login/LoginPage';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

1️⃣ <BrowserRouter>

브라우저의 주소(URL)를 감지하고, 컴포넌트를 렌더링할 수 있도록 도와주는 컨테이너이다.

전체 앱을 감싸서 React Router 기능을 활성화한다.

 

2️⃣ <Routes>

여러 개의 <Route> 들을 그룹으로 묶는 역할을 한다.

 

3️⃣ <Route path="/" element={<MainPage />} />

path="/"는 루트 경로, 즉 http://localhost:3000/에 해당하며,

element={<MainPage />}는 해당 경로일 때 보여줄 컴포넌트를 지정한다.

 

 

즉, 구조적으로 보면 아래와 같다.

URL 주소	렌더링 되는 컴포넌트
/	MainPage
/login	LoginPage