React Router로 SPA 라우팅 구현하기: 기본적인 라우팅 설정과 동적 라우팅 방법

React는 컴포넌트 기반의 UI 라이브러리로, SPA(Single Page Application) 개발에 많이 사용됩니다. SPA는 하나의 HTML 파일로 여러 페이지를 전환하는 방식으로, 사용자 경험을 향상시키는 데 유리합니다. 이 글에서는 React Router를 사용하여 SPA에서 라우팅을 구현하는 방법에 대해 다룹니다.

React Router 기본 설정

먼저, React Router를 프로젝트에 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

bash
npm install react-router-dom

설치가 완료되면, 애플리케이션의 진입점 파일(예: src/index.js)에서 BrowserRouter 컴포넌트를 사용하여 라우터를 설정합니다.

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

BrowserRouter 컴포넌트는 애플리케이션에 라우팅 기능을 제공합니다. 이제 App 컴포넌트 안에서 각각의 페이지를 구성하는 라우트를 정의합니다.

예를 들어, 홈 페이지와 어바웃 페이지를 라우팅하는 코드는 다음과 같습니다.

javascript
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </Switch>
  );
}

export default App;

Switch 컴포넌트는 하위의 라우트들 중에서 첫 번째 일치하는 라우트를 렌더링합니다. Route 컴포넌트의 path 속성은 URL 경로를 정의하고, component 속성은 해당 경로에 매핑되는 컴포넌트를 지정합니다.

동적 라우팅

동적 라우팅은 URL 경로의 일부가 동적으로 변경될 때 유용합니다. 예를 들어, 블로그 포스트의 ID에 따라 다른 페이지를 렌더링하고자 할 때 사용할 수 있습니다.

동적 라우팅을 구현하려면 Route 컴포넌트의 path 속성에 동적 값을 지정합니다. 다음은 동적 라우팅을 사용하는 예입니다.

javascript
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import PostPage from './PostPage';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/post/:id" component={PostPage} />
    </Switch>
  );
}

export default App;

위 코드에서 /post/:id는 동적 경로를 나타냅니다. :id 부분은 변수로, URL의 해당 위치에 어떤 값이 오든 매칭됩니다. 예를 들어, /post/1, /post/2 등의 URL이 /post/:id 경로에 매핑됩니다.

동적 경로의 값을 컴포넌트 내부에서 사용하려면 react-router-dom 패키지에서 제공하는 useParams 훅을 사용합니다.

javascript
import React from 'react';
import { useParams } from 'react-router-dom';

function PostPage() {
  const { id } = useParams();
  return (
    <div>
      <h1>Post Page</h1>
      <p>Post ID: {id}</p>
    </div>
  );
}

export default PostPage;

이렇게 하면, URL에 포함된 id 값을 PostPage 컴포넌트에서 접근할 수 있습니다.

라우터와 네비게이션

라우팅을 설정한 후에는 사용자가 다른 페이지로 이동할 수 있도록 네비게이션 링크를 추가해야 합니다. react-router-dom에서 제공하는 Link 컴포넌트를 사용하면 쉽게 네비게이션을 구현할 수 있습니다.

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

이제 Navigation 컴포넌트를 App 컴포넌트에 추가하여 네비게이션 링크를 사용할 수 있습니다.

javascript
function App() {
  return (
    <>
      <Navigation />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/post/:id" component={PostPage} />
      </Switch>
    </>
  );
}

결론

React Router를 사용하면 간단하게 SPA에서 라우팅을 구현할 수 있습니다. 기본적인 라우팅 설정부터 동적 라우팅까지, React Router의 다양한 기능을 통해 복잡한 애플리케이션의 라우팅을 쉽게 처리할 수 있습니다. 이 글에서 다룬 내용을 바탕으로 여러분의 프로젝트에 적용해 보세요.