React Router: SPA 개발의 필수 도구, 완벽 가이드 🧭

React 애플리케이션에서 사용자에게 데스크톱 애플리케이션과 같은 부드럽고 유동적인 경험을 제공하고 싶다면, 페이지 전체를 새로고침하지 않고도 다양한 뷰 또는 구성 요소 간에 원활하게 이동할 수 있는 "라우팅" 기능은 필수적입니다. 그리고 React 생태계에서 이 라우팅 기능을 가장 강력하고 효율적으로 구현할 수 있게 해주는 라이브러리가 바로 "React Router" 입니다.

이번 포스팅에서는 React Router의 핵심 개념부터 실제 프로젝트에 적용하는 방법까지, 여러분이 React Router를 완벽하게 이해하고 활용할 수 있도록 깊이 있는 정보를 제공해 드리겠습니다.

---

React Router, 왜 필요할까요? 🤔

기존 웹사이트에서는 다른 페이지로 이동할 때마다 브라우저가 전체 페이지를 새로 로드했습니다. 이는 사용자 경험 측면에서 지연을 유발하고 비효율적일 수 있습니다. 반면 React Router는 URL 경로를 기반으로 구성 요소의 탐색 및 렌더링을 효율적으로 관리하여, 이러한 전체 페이지 새로고침 없이도 애플리케이션 내의 다양한 뷰를 전환할 수 있게 합니다.

이를 통해 개발자는 빠르고 반응성이 뛰어난 단일 페이지 애플리케이션(SPA) 을 구축할 수 있으며, 사용자는 마치 독립적인 애플리케이션을 사용하는 듯한 매끄러운 경험을 누릴 수 있게 됩니다.

---

728x90

React Router의 핵심 개념 파헤치기 🔍

React Router를 효과적으로 사용하기 위해서는 몇 가지 핵심 개념을 이해하는 것이 중요합니다. 이 개념들은 React Router의 동작 방식과 기능을 구성하는 기본 빌딩 블록입니다.

1. Routes (경로)

Routes는 React Router의 가장 근본적인 개념입니다. 각 경로는 특정 URL 경로를 해당 경로에 접근할 때 렌더링되어야 하는 구성 요소에 매핑합니다. 쉽게 말해, 특정 주소에 대한 "문지기" 역할을 하여 올바른 콘텐츠가 올바른 시간에 표시되도록 합니다. 예를 들어, /about 경로에 접근하면 About 구성 요소가 렌더링되도록 설정할 수 있습니다.

2. Router (라우터)

라우터는 애플리케이션의 현재 위치(URL)를 지속적으로 추적하고, 이를 기반으로 해당 경로를 렌더링하는 역할을 합니다. 마치 오케스트라의 지휘자와 같아서 어떤 구성 요소가 현재 활성화되어야 하는지 결정하고 화면에 표시되도록 지시합니다. React Router에서는 일반적으로 BrowserRouter를 사용하여 HTML5 History API를 활용해 UI를 URL과 동기화합니다.

3. Link (링크)

Link 구성 요소는 사용자가 페이지를 새로고침할 필요 없이 다양한 경로 사이를 이동할 수 있도록 합니다. 이는 전통적인 HTML의 <a> 태그와 유사하지만, SPA의 특성을 고려하여 페이지 전환을 훨씬 더 부드럽고 빠르게 만듭니다. to 속성에 이동할 경로를 지정하여 사용합니다.

4. Switch (스위치)

Switch 구성 요소는 자식 요소 중 첫 번째로 일치하는 경로만 렌더링하도록 보장합니다. 이는 각 URL 경로에 대해 하나의 구성 요소만 동시에 표시되도록 하여 예상치 못한 구성 요소의 중복 렌더링을 방지하고 깔끔한 UI를 유지하는 데 크게 기여합니다. 여러 Route가 있을 때, Switch는 가장 먼저 매칭되는 Route만 렌더링합니다.

5. Nested Routes (중첩 경로)

중첩 경로는 다른 경로 내부에 경로를 정의할 수 있는 기능으로, 복잡한 UI 구조를 생성하면서도 관련 구성 요소를 논리적으로 함께 유지할 수 있도록 합니다. 예를 들어, 블로그 게시물에 댓글을 표시하는 경우, /posts/:id 아래에 /comments 경로를 중첩하여 관련 콘텐츠를 명확하게 구성할 수 있습니다. 이는 대규모 애플리케이션에서 매우 유용하게 활용될 수 있습니다.

---

React Router, 프로젝트에 설정하는 방법 🛠️

이제 React Router의 핵심 개념을 이해했으니, 실제로 여러분의 React 프로젝트에 React Router를 설정하는 단계를 알아보겠습니다.

1. React Router 설치

가장 먼저 할 일은 React 웹 애플리케이션을 위해 특별히 설계된 react-router-dom 라이브러리를 설치하는 것입니다. 터미널에서 다음 명령어를 실행하세요.

npm install react-router-dom

이 명령은 React 애플리케이션에서 라우팅 기능을 활용하는 데 필요한 모든 필수 패키지와 의존성을 설치합니다.

2. 기본 구조 설정

설치 후, 메인 애플리케이션 파일(일반적으로 App.js)에 기본적인 라우팅 구조를 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 구성 요소 불러오기
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <h1>내 웹사이트</h1>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

이 구조는 애플리케이션의 라우팅 동작에 대한 틀을 제공하며, Home 및 About 구성 요소에 대한 경로를 정의합니다. BrowserRouter는 HTML5 히스토리 API를 사용하여 UI를 URL과 동기화합니다. exact 속성은 해당 경로가 정확히 일치할 때만 렌더링되도록 합니다.

3. 구성 요소 생성

라우팅될 Home 및 About과 같은 간단한 구성 요소를 정의합니다.

// Home.js
const Home = () => {
  return <h2>내 웹사이트에 오신 것을 환영합니다!</h2>;
};

export default Home;

// About.js
const About = () => {
  return <h2>여기는 소개 페이지입니다.</h2>;
};

export default About;

이러한 구성 요소는 해당 경로에 접근할 때 렌더링될 실제 콘텐츠를 나타냅니다. 실제 애플리케이션에서는 훨씬 더 복잡한 UI를 포함할 수 있습니다.

4. 내비게이션에 Link 사용

사용자가 페이지를 새로고침하지 않고도 이러한 페이지 사이를 이동할 수 있는 방법이 필요합니다. 이때 Link 구성 요소를 사용합니다.

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

function App() {
  return (
    <Router>
      <nav>
        {/* 앵커 태그 대신 Link 사용 */}
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>

      {/* 기존 코드 */}
    </Router>
  );
}

Link 구성 요소는 클라이언트 측 탐색을 활성화하여 전체 페이지 새로고침 없이 URL을 변경하고 해당 구성 요소를 렌더링합니다. 이는 SPA의 핵심 요소이며 사용자 경험을 크게 향상시킵니다.

5. 페이지를 찾을 수 없는 경우 처리 (404 페이지)

Switch 문 끝에 "페이지를 찾을 수 없음" 경로를 추가하여 일치하는 경로가 없는 경우를 처리하는 것이 좋습니다.

<Switch>
  {/* 기존 경로 */}
  ...

  {/* 페이지를 찾을 수 없음 경로 */}
  <Route render={() => <h2>404 - 페이지를 찾을 수 없습니다</h2>} />
</Switch>

이 Route는 위에 정의된 어떤 경로와도 일치하지 않는 모든 URL에 대해 포괄적인 역할을 하여 사용자에게 명확한 오류 메시지를 제공합니다. 이는 사용자 경험을 개선하고 혼란을 줄이는 데 중요합니다.

---

실용적인 예시: 전자상거래 웹사이트의 중첩 라우팅 🛒

전자제품 및 의류와 같은 여러 카테고리를 가진 전자상거래 웹사이트를 구축한다고 상상해 봅시다. React Router의 강력한 중첩 라우팅 기능을 활용하면 다음과 같이 복잡한 UI를 효율적으로 구성할 수 있습니다.

• 각 카테고리에 대한 별도의 구성 요소를 생성합니다.
• /products 아래에 중첩 경로를 설정하여 /products/electronics를 방문할 때 관련 제품이 표시되도록 합니다.

다음은 해당 시나리오를 React Router로 구현하는 예시입니다.

<Switch>
  ...
  {/* 중첩 경로가 있는 제품 경로 */}
  <Route path="/products">
    {/* 여기에 중첩 경로가 들어갑니다 */}
    {/* 예: <Route path="/products/electronics" component={Electronics} /> */}
  </Route>
</Switch>