[React] React Router 알아보기

 

React Router는 React 애플리케이션에서 페이지 간의 네비게이션을 관리하는 데 사용되는 라이브러리입니다. 이를 통해 사용자가 URL을 변경할 때마다 UI를 업데이트하고 해당 URL에 맞는 컴포넌트를 렌더링할 수 있습니다. 이를 통해 싱글 페이지 애플리케이션(SPA)을 구축하는 데 매우 유용합니다.

React Router의 핵심 요소는 다음과 같습니다:

1. BrowserRouter: HTML5의 History API를 사용하여 URL을 관리하는 컴포넌트입니다. 일반적으로 애플리케이션의 최상위 컴포넌트로 사용됩니다.

2. Route: URL 패턴과 일치하는 경우 특정 컴포넌트를 렌더링합니다. 여러 Route 컴포넌트를 중첩하여 사용할 수 있습니다.

3. Switch: 여러 Route를 감싸고, 그 중 첫 번째로 일치하는 라우트만 렌더링합니다. 이는 일치하는 경로가 여러 개일 때 중복 렌더링을 방지하는 데 사용됩니다.

4. Link: HTML의 `<a>` 태그와 유사하지만, 페이지 전환 시에 브라우저가 새로고침되지 않고 React Router가 제어하는 방식으로 URL을 변경합니다.

5. Redirect: 특정 URL로 리디렉션을 수행하는 데 사용됩니다.

React Router를 사용하여 기본적인 라우팅을 설정하는 예제를 살펴보겠습니다.

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const NotFound = () => <h1>404 Not Found</h1>;

const App = () => {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/404" component={NotFound} />
          <Redirect to="/404" />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

이 코드에서는 react-router-dom 라이브러리를 사용하여 기본적인 라우팅을 구현했습니다. <Router> 컴포넌트로 애플리케이션을 감싸고, <Switch> 컴포넌트로 Route들을 감싸 중첩된 경로 중에서 첫 번째로 일치하는 라우트만 렌더링하도록 설정했습니다.

이러한 방식으로 React Router를 사용하여 다양한 페이지 간의 네비게이션을 관리할 수 있습니다.