[LG CNS AM Inspire Camp 1기] React (9) - [Routing] 라우팅 개념과 BrowserRouter

정성엽·2025년 1월 9일

BrowserRouter LG CNS AM Inspire Camp React Route am routing

LG CNS AM Inspire 1기

목록 보기

19/53

INTRO

이번 포스팅에서는 리액트에서 페이지 이동을 관리하는 핵심 라이브러리인 React Router에 대해 알아보려고 한다.

React Router는 싱글 페이지 애플리케이션(SPA)에서 마치 여러 페이지가 있는 것처럼 사용자 경험을 제공하는 도구이다.

이제부터 React Router의 동작 원리와 이를 사용하는 방법인 BrowserRouter에 대해서 살펴보자 👀

1. React Router란?

React Router는 SPA에서 라우팅을 구현하기 위한 서드파티 라이브러리이다.

이는 URL에 따라 적절한 컴포넌트를 렌더링하여 마치 여러 페이지로 구성된 웹사이트처럼 동작하게 만들어준다.

💡 왜 React Router가 필요할까?

물론, 조건부 렌더링을 통해 여러 "페이지"를 구현할 수 있다.

하지만 이 방식에는 몇 가지 심각한 한계가 존재한다.

조건부 렌더링의 문제점

상태 관리의 복잡성

여러 페이지를 상태로 관리하면 코드가 복잡해지고 유지보수가 어려워진다.

브라우저 히스토리 문제

브라우저의 뒤로 가기/앞으로 가기 기능이 정상적으로 동작하지 않는다.

공유성 제한

특정 "페이지"에 대한 URL이 없어 북마크나 공유가 불가하다.

라우팅 개념을 활용하면 위 문제들을 해결할 수 있다!

2. React Router의 동작 원리

React Router는 크게 세 가지 단계로 동작한다.

💡 SPA & 라우팅 프로세스

1. 초기 로딩

브라우저가 처음 서버에 접속하면 index.html과 필요한 JS 파일들을 다운로드

이때 모든 페이지의 컴포넌트 코드가 포함된 JS 파일을 받아옴

2. 라우팅 처리

URL 변경을 감지하여 해당하는 컴포넌트를 렌더링

서버 요청 없이 클라이언트 사이드에서 처리

이미 다운로드된 JS 코드를 활용하여 화면 전환

3. 데이터 처리

필요한 데이터는 RESTful API 등을 통해 서버에서 비동기적으로 가져옴

이후, 받아온 데이터로 컴포넌트 내용을 동적으로 구성

특히 위 프로세스에서 URL 변경이 감지되어야만 적절한 컴포넌트를 렌더링한다는 것을 기억해두자

(사실 위 과정을 전체적으로 이해하는게 중요하다 😅)

3. BrowserRouter 사용하기

BrowserRouter는 React Router의 가장 기본적인 라우터 컴포넌트이다.

그렇다면 BrowserRouter는 어떤 특징이 있을까?

💡 BrowserRouter 특징

BrowserRouter는 다음과 같은 특징을 갖는다.

1. 간단한 설정

HTML5의 History API를 기반으로 URL 관리

직관적인 구조로 구성 가능

2. 컴포넌트 기반 라우팅

URL 패턴과 컴포넌트를 직접 매핑

<Routes>, <Route> 컴포넌트 이용

이를 활용한 중첩 라우팅 지원

여기서 History API는 우리가 흔히 사용하는 브라우저의 기능을 제공한다.

예를들어, 뒤로가기를 위해서는 이전 페이지가 어디인지 알아야한다.

또한, 문제가 발생한 페이지를 2번 걸쳤다면 뒤로가기를 계속해도 문제가 있는 페이지가 나온다.

(이전 페이지를 문제가 있는 페이지로 인식하기 때문)

이러한 경우, redirect를 통해 적절한 페이지로 라우팅을 해야하는데 History API가 이를 위한 기능들을 내부적으로 제공한다.

💡 BrowserRouter 실습

그렇다면 BrowserRouter는 어떻게 사용할 수 있을까?

우선 이를 사용하기 위해서는 react-router-dom을 설치해야한다.

사용 예시는 다음과 같다.

Sample Code

import { Route, Routes, BrowserRouter } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import { Link } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to={"/"}>Home</Link>
        </li>
        <li>
          <Link to={"/about"}>About</Link>
        </li>
        <li>
          <Link to={"/contact"}>Contact</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}