[리액트] 라우팅,React Router를 이용한 싱글 페이지 애플리케이션 라우팅

안녕하세요 이번에는 리액트에서 싱글 페이지 애플리케이션(Single-Page Application, SPA)의 라우팅을 구현하기 위해 사용되는 React Router에 대해 알아보고자 합니다. React Router는 리액트에서 라우팅을 처리하는 데 도움을 주는 라이브러리로, 페이지 간의 전환과 URL을 기반으로 한 컴포넌트 렌더링을 간편하게 처리할 수 있습니다. 이번 글에서는 React Router의 기본 개념과 주요 기능에 대해 살펴보고, 리액트 애플리케이션에서의 라우팅 구현 방법을 알아보겠습니다.

React Router 소개
React Router는 리액트에서 SPA의 라우팅을 처리하기 위해 사용되는 오픈 소스 라이브러리입니다. 리액트 애플리케이션에서 다른 페이지로의 전환, 동적 URL 매칭, 중첩된 라우팅 등 다양한 라우팅 기능을 제공합니다. React Router는 공식적으로 리액트 팀에서 관리되며, 많은 개발자들에게 널리 사용되고 있습니다.

주요 개념과 컴포넌트
- BrowserRouter: HTML5의 History API를 사용하여 브라우저의 URL을 관리하는 컴포넌트입니다. 주로 최상위 컴포넌트로 사용되며, 애플리케이션에서 한 번만 사용해야 합니다.
- Route: 특정 URL 경로에 대해 컴포넌트를 렌더링하기 위해 사용되는 컴포넌트입니다. path prop으로 경로를 지정하고, component prop으로 렌더링할 컴포넌트를 지정합니다.
- Switch: 여러 개의 Route 컴포넌트를 감싸고, 첫 번째로 매칭되는 경로의 컴포넌트만 렌더링합니다. Switch를 사용하면 중복된 경로의 컴포넌트 렌더링을 방지할 수 있습니다.
- Link: 페이지 간의 링크를 생성하기 위해 사용되는 컴포넌트입니다. to prop으로 이동할 경로를 지정하고, 클릭 시 해당 경로로 전환됩니다.

기본적인 라우팅 구현
React Router를 사용하여 기본적인 라우팅을 구현하는 방법을 알아보겠습니다.
가장 먼저, 리액트 애플리케이션에서 React Router를 설치해야 합니다. npm 또는 yarn을 사용하여 react-router-dom 패키지를 설치할 수 있습니다.

```
npm install react-router-dom
```

또는

```
yarn add react-router-dom
```

설치가 완료되었다면, BrowserRouter 컴포넌트를 사용하여 애플리케이션의 최상위 컴포넌트를 감싸줍니다. 이후 Route 컴포넌트를 사용하여 경로에 따른 컴포넌트를 렌더링할 수 있습니다. 예를 들어, 다음과 같이 두 개의 경로를 가지는 라우팅을 구현해보겠습니다.

import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

위의 예제에서는 BrowserRouter로 애플리케이션을 감싸고, Link 컴포넌트를 사용하여 페이지 간의 링크를 생성했습니다. Switch 컴포넌트는 Route 컴포넌트들을 감싸고, 첫 번째로 매칭되는 경로의 컴포넌트만 렌더링됩니다.

동적 라우팅
React Router를 사용하면 동적인 라우팅도 간편하게 처리할 수 있습니다.

 예를 들어, 특정 사용자의 프로필 페이지를 표시하는 동적 라우팅을 구현해보겠습니다.

function UserProfile() {
  const { username } = useParams();

  return <h1>{username}'s Profile</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:username" component={UserProfile} />
      </Switch>
    </BrowserRouter>
  );
}

위의 예제에서는 동적인 경로인 "/users/:username"에 대해 UserProfile 컴포넌트를 렌더링합니다. useParams 훅을 사용하여 URL의 동적 부분인 username을 추출하고, 해당 사용자의 프로필을 표시합니다.

추가적인 기능
React Router는 더욱 많은 기능을 제공합니다.

중첩된 라우팅, 리다이렉트, 인증과 권한 부여 등 다양한 기능을 사용할 수 있습니다. 

공식 문서를 참조하여 필요한 기능을 추가로 학습하고 적용해보세요.

이상으로 React Router를 이용한 싱글 페이지 애플리케이션 라우팅에 관해 알아보았습니다. React Router를 사용하면 리액트 애플리케이션의 라우팅을 효율적으로 처리할 수 있으며, 좀 더 유연하고 사용자 친화적인 웹 애플리케이션을 개발할 수 있습니다. React Router를 적용하여 멋진 애플리케이션을 구축해보세요!