React 라우팅의 원리와 역할

현대 웹 애플리케이션은 한 번의 페이지 로딩 후 사용자가 다양한 "화면"을 넘나들 수 있도록 설계됩니다. 이를 Single Page Application(SPA)이라 부르며, React는 이 패러다임에 적합합니다. 하지만 SPA는 실제로는 단 하나의 HTML 파일(index.html) 위에서, 여러 화면(컴포넌트)을 유연하게 보여주어야 하므로 "라우팅"이라는 기술이 필수입니다. 라우팅은, 사용자가 주소(URL)를 바꿀 때마다 그에 맞는 컴포넌트를 보여주는 방법입니다.

React 시대의 라우팅은 기존 웹처럼 서버가 매번 새로운 HTML을 내려주는 방식이 아닌, 클라이언트에서 URL을 해석해 필요한 뷰만 변경합니다. React Router는 이런 역할을 하는 대표적인 라이브러리입니다. 이 도구를 사용하면 '경로 → 컴포넌트'의 매핑을 선언적으로 설정할 수 있습니다.

React Router 도입하기

React 프로젝트에서 라우팅을 적용하려면, 우선 react-router-dom 패키지를 설치해야 합니다. 일단 설치가 끝나면 애플리케이션의 최상위 컴포넌트를 BrowserRouter로 감싸는 것이 기본입니다. BrowserRouter는 주소(URL) 변화를 감지하여 내부적으로 컴포넌트 뷰를 스위칭합니다.

다음 단계는 실제 URL 별로 보여줄 화면(컴포넌트)을 정의하는 일입니다. 이를 위해 Routes와 Route 컴포넌트를 사용합니다. 각 Route는 path와 element 속성으로 구성되며, 예를 들어 /about 경로에 AboutPage 컴포넌트를 연결하려면 아래와 같이 작성합니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

이처럼 URL이 /about일 때는 About 컴포넌트가, /일 때는 Home 컴포넌트가 보여집니다. 서버는 별도의 처리를 하지 않으므로, SPA의 장점인 빠른 화면 전환이 가능합니다.

SPA 환경에서 라우팅의 주의점

React Router를 적용할 때 흔히 간과하는 점이 있습니다. 서버는 어떤 경로로 접근해도 항상 같은 리액트 앱의 index.html을 반환해야 합니다. 만약 서버에서 특정 경로마다 다른 파일을 내려주도록 설정한다면, SPA의 라우팅이 깨집니다. 따라서 서버 세팅 또한 중요합니다.

또한 라우팅은 단순히 경로에 따라 화면만 바꾸는 것이 전부가 아닙니다. 페이지 전환, 파라미터 전달, 프로텍티드 라우트(인증 필요 페이지), 404 에러 처리 등 더 많은 실제 시나리오가 존재합니다. 이들 역시 React Router에서 지원하며, 차츰 다루게 될 것입니다.

마치며: 라우팅으로 확장되는 React

프로젝트가 커질수록 "내가 보고 싶은 화면을 자연스럽게 보여주는 것"이 곧 사용자 경험의 핵심이 됩니다. React Router는 리액트 SPA 프로젝트에서 이 과정을 깔끔하게 해결해주는 표준 솔루션입니다. 컴포넌트의 설계 원리와 데이터 흐름에 대한 감각을 익혔다면, 이제 라우팅 기법을 통해 한 단계 넓은 리액트의 세계로 나아갈 차례입니다. 다음 장에서는 라우팅 심화 활용, 동적 경로, 중첩 라우트 등 다양한 응용법도 하나씩 익혀볼 것입니다.