[React] BrowserRouter로 SPA 라우팅 구현하기 🗺️

SPA와 라우팅의 이해

먼저 SPA가 무엇인지 알아봐야 되지 않을까 싶다. 뭘까?

SPA(Single Page Application)는 하나의 HTML 페이지에서 JavaScript를 통해 동적으로 콘텐츠를 변경하는 웹 애플리케이션이다.

최초 접속 시 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 한 번에 받아온 후, 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 서버에서 전달받아 페이지를 업데이트한다.

아직도 이해가 안되는 사람들이 많다고 생각한다. 정리해보자면 아래와 같다.

[전통적인 웹 페이지 방식]
브라우저 -> 페이지 요청 -> 서버
서버 -> HTML 페이지 전체 전송 -> 브라우저
브라우저 -> 페이지 전체 새로고침

[SPA 방식]
브라우저 -> 최초 접속 -> 서버
서버 -> 전체 리소스 한 번에 전송 -> 브라우저
이후 데이터 필요시:
브라우저 -> API 요청 -> 서버
서버 -> JSON 데이터만 전송 -> 브라우저
브라우저 -> 필요한 부분만 업데이트

모든 리소스를 처음에 받아오기 때문에 초기 로딩이 느릴 수 있지만 필요한 데이터만 주고받기 때문에 서버의 부하가 줄어든다는 장점은 있는 것 같다!

---

SPA에서의 라우팅

SPA에서 라우팅은 브라우저의 주소와 애플리케이션의 상태를 동기화하는 중요한 역할을 한다.

React Router를 사용하면 다음과 같은 기능을 구현할 수 있다.

// 기본적인 라우팅 구성 예시
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />} />
        <Route path="/products/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

이 코드는 URL 경로에 따라 다른 컴포넌트를 렌더링하며, 사용자가 브라우저의 뒤로 가기/앞으로 가기를 사용하더라도 올바른 컴포넌트가 표시되도록 보장한다.

 

그럼 여기서 나올 질문 React Router가 뭘까???

---

React Router란?

React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 라이브러리이다.

또한 페이지 새로고침 없이도 주소를 변경하고, 주소에 따라 다른 컴포넌트를 렌더링할 수 있게 해준다.

(무엇보다도 SPA에서 브라우저의 뒤로 가기/앞으로 가기 등의 기능이 기본적으로 동작하지 않는 문제를 React Router과 브라우저의 History API를 활용하여 이 문제를 해결하기도 한다!)

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

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

위와 비슷한 예제코드이긴 하지만 설명해보자면 이 코드에서

• BrowserRouter는 전체 앱을 감싸고 있으며,
• Routes 컴포넌트 내부에 여러 Route를 정의하여 각 경로에 따라 다른 컴포넌트를 렌더링한다.
• path 속성은 URL 경로를, element 속성은 해당 경로에서 보여줄 컴포넌트를 지정한다.

import { Link, useNavigate } from 'react-router-dom';

function Navigation() {
  const navigate = useNavigate();

  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <button onClick={() => navigate('/contact')}>연락하기</button>
    </nav>
  );
}

 

위 예시코드를 보면 두 가지 방법으로 페이지 이동을 구현한 것을 볼 수 있다. 바로 Link와 useNavigate이다.

• Link 컴포넌트는 일반적인 앵커 태그처럼 동작하지만 페이지 새로고침을 하지 않으며
• useNavigate 훅을 사용하면 프로그래매틱하게 페이지 이동을 할 수 있다.

---

번외: BrowserRouter? HashRouter???

최근에 github pages에 프론트 프로젝트를 배포하다가 알게 된 사실인데 깃헙 페이지는 SPA를 지원하지 않았다.

필자는 카카오 로그인을 사용해서 새로고침이 필요했는데 SPA를 지원하지 않기에 BrowserRouter가 아닌 HashRouter을 고려했었어야 했다.

HashRouter는 뭘까??
HashRouter는 URL에 해시(#)를 사용하여 라우팅을 구현한다.
예: example.com/#/about

하지만 url이 너무 더럽게 보여서 패스...