1. 개요
이 문서는 React 애플리케이션에서 라우팅(Routing)을 구현하는 데 사용되는 React Router의 핵심 개념과 필요성을 설명합니다. SPA(Single Page Application)의 사용자 경험을 향상시키는 동적 라우팅의 원리를 이해할 수 있습니다.
2. 라우팅의 핵심 개념
2.1. 라우팅 (Routing)
라우팅은 사용자가 요청한 주소(URL)에 따라 적절한 페이지나 콘텐츠를 보여주는 전반적인 과정을 의미합니다. 웹 애플리케이션에서 사용자가 특정 링크를 클릭하거나 주소창에 URL을 입력했을 때, 해당 경로에 맞는 화면으로 전환하는 모든 행위가 라우팅에 해당합니다.
2.2. 라우터 (Router)
라우터는 이러한 라우팅 과정을 실제로 구현하고 관리하는 도구나 라이브러리를 말합니다. 라우터는 현재 브라우저의 주소를 감시하고, 정의된 규칙에 따라 어떤 컴포넌트나 페이지를 보여줄지 결정하는 역할을 수행합니다.
2.3. 리액트 라우터 (React Router)
리액트 라우터는 React에서 가장 널리 사용되는 클라이언트 사이드 라우팅 라이브러리입니다. React는 본질적으로 UI 라이브러리이므로 자체적인 라우팅 기능을 내장하고 있지 않습니다. 따라서 리액트 라우터를 사용하여 SPA(Single Page Application)의 한계를 극복하고, 실제 페이지를 이동하는 것처럼 자연스러운 사용자 경험을 제공할 수 있습니다.
3. 정적 라우팅 vs 동적 라우팅
라우팅 방식은 크게 서버 중심의 '정적 라우팅'과 클라이언트 중심의 '동적 라우팅'으로 나눌 수 있습니다.
3.1. 정적 라우팅 (Static Routing)
-
관련 개념: MPA (Multi Page Application), SSR (Server Side Rendering)
-
동작 방식: 서버에 미리 정의된 경로에 따라 완전한 형태의 HTML 페이지를 제공하는 전통적인 방식입니다. 사용자가 새로운 URL로 이동할 때마다 서버에 새로운 페이지를 요청하고, 서버는 해당 요청에 맞는 새로운 HTML 파일을 전송합니다. 이 과정에서 브라우저는 페이지 전체를 새로고침하게 됩니다.
-
정적 라우팅 예시:
/index.html요청 → 서버가index.html파일 전송/about.html요청 → 서버가about.html파일 전송/contact.html요청 → 서버가contact.html파일 전송
-
특징:
- 각 URL이 실제 파일과 1:1로 매칭됩니다.
- 페이지 이동 시 전체 페이지가 다시 로드되어 깜빡임 현상이 발생할 수 있습니다.
- 첫 페이지 로딩 시 서버에서 렌더링된 HTML을 받으므로 초기 SEO(검색 엔진 최적화)에 유리할 수 있습니다.
3.2. 동적 라우팅 (Dynamic Routing)
-
관련 개념: SPA (Single Page Application), CSR (Client Side Rendering)
-
동작 방식: 클라이언트 측(브라우저)에서 JavaScript를 사용하여 주소(URL) 변경을 감지하고, 해당 주소에 맞는 화면을 동적으로 렌더링하는 방식입니다. 최초 로딩 시 하나의 HTML 파일(
index.html)과 JavaScript 번들 파일만 받고, 이후의 모든 페이지 전환은 JavaScript가 페이지 새로고침 없이 필요한 부분(컴포넌트)만 교체하여 처리합니다. -
동적 라우팅 특징:
- 최초 로딩 후에는 페이지 전환이 매우 빠르고 부드럽습니다.
- 서버와의 통신은 화면 구성에 필요한 데이터(JSON 등)를 주고받는 데 집중되므로 서버 요청을 최소화할 수 있습니다.
- 깜빡임 없는 화면 전환으로 우수한 사용자 경험(UX)을 제공합니다.
-
동적 라우팅 예시 (React Router):
http://도메인/→<Home />컴포넌트 렌더링http://도메인/about→<About />컴포넌트 렌더링http://도메인/profile/john→<Profile username="john" />컴포넌트 렌더링
4. 비교
| 구분 | 정적 라우팅 (Static Routing) | 동적 라우팅 (Dynamic Routing) |
|---|---|---|
| 애플리케이션 유형 | MPA (Multi Page Application) | SPA (Single Page Application) |
| 렌더링 주체 | 서버 (Server Side Rendering) | 클라이언트 (Client Side Rendering) |
| 페이지 전환 | 전체 페이지 새로고침 (느림) | 필요한 부분만 교체 (빠름) |
| 서버 역할 | HTML 페이지 제공 | 데이터(API) 제공 |
| 사용자 경험 | 페이지 이동 시 끊기는 느낌 | 부드럽고 연속적인 느낌 |
