React Router: 싱글 페이지 애플리케이션에서 페이지 간 네비게이션 기초

React Router란 무엇인가?

React Router는 React 라이브러리의 라우팅 솔루션으로 사용하는 다양한 페이지와 URL을 정의하고 그에 따라 컴포넌트를 렌더링하는 기능을 제공합니다. 특히, 싱글 페이지 애플리케이션(SPA)에서 URL 변경에 따라 페이지가 새로 고침되지 않고도 컴포넌트가 교체되며 동작합니다.

React Router의 특장점

• 동적 라우트 매칭: URL 패턴에 따라 적절한 컴포넌트를 렌더링합니다.
• 중첩 라우팅: 복잡한 레이아웃을 쉽게 관리할 수 있게 해줍니다.
• 편리한 네비게이션: history 객체와 다양한 훅을 제공하여 쉽게 네비게이션을 구현할 수 있습니다.
• 코드 분리: 필요에 따라 코드 스플리팅을 통해 초기 로딩 속도를 줄일 수 있습니다.

React Router의 설치 및 기본 사용법

React Router를 프로젝트에 추가하려면 npm 또는 yarn을 사용합니다.

bash
npm install react-router-dom

설치가 완료되면, 앱의 기본 설정을 시작할 수 있습니다. React Router를 사용하려면 먼저 BrowserRouter를 사용하여 앱 전체를 감싸야 합니다.

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

BrowserRouter와 Switch, Route 이해하기

• BrowserRouter: HTML5의 히스토리 API를 이용해 페이지를 관리합니다.
• Switch: 중첩된 여러 Route 중 매칭되는 첫 번째 경로를 렌더링합니다.
• Route: 특정 경로와 일치할 때 렌더링할 컴포넌트를 정의합니다.

네비게이션 구현하기

네비게이션을 구현하기 위해 Link 또는 NavLink 컴포넌트를 사용합니다. 이 컴포넌트들은 HTML의 a 태그와 유사하지만 페이지 리로드 없이 경로를 변경합니다.

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

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

NavLink의 특징

NavLink는 Link와 거의 동일하지만 현재 활성화된 경로에 클래스나 스타일을 추가할 수 있는 속성들을 제공합니다.

jsx
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li><NavLink to="/" activeClassName="active" exact>Home</NavLink></li>
        <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
        <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li>
      </ul>
    </nav>
  );
}

동적 라우트와 파라미터 핸들링

React Router를 사용하면 URL의 일부를 파라미터로 사용할 수 있습니다. 이는 동적 라우트를 설정하거나 사용자별로 다른 페이지를 보여줄 때 유용합니다.

jsx
function UserProfile({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

<Route path="/user/:id" component={UserProfile} />

여기서 :id는 동적 파라미터로, match.params.id를 통해 접근할 수 있습니다.

중첩 라우팅과 레이아웃

중첩 라우팅을 사용하여 복잡한 페이지 레이아웃을 쉽게 관리할 수 있습니다.

jsx
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Switch>
        <Route path="/dashboard/overview" component={Overview} />
        <Route path="/dashboard/stats" component={Stats} />
      </Switch>
    </div>
  );
}

<Router>
  <Route path="/dashboard" component={Dashboard} />
</Router>

중첩된 라우트는 부모 경로에 따라 다르게 렌더링됩니다. 이러한 설정을 통해 복잡한 레이아웃을 효과적으로 관리할 수 있습니다.

결론

React Router는 싱글 페이지 애플리케이션에서 페이지 간 네비게이션을 쉽게 구현할 수 있도록 돕는 강력한 도구입니다. 기본적인 사용법과 다양한 기능들을 익히고 나면, 더 복잡한 애플리케이션에서도 효율적으로 라우팅을 관리할 수 있습니다. 이제 React Router를 사용해 직접 프로젝트를 구현해보세요.