React의 Router

React의 Router는 사용자가 페이지를 이동할 때, 전체 페이지를 새로 고침하지 않고 특정 컴포넌트로 “가상 전환”하는 방식으로, SPA(Single Page Application)에서 효과적으로 페이지 전환을 관리할 수 있게 해주는 라이브러리입니다. 이 기능을 제공하는 대표적인 라이브러리가 React Router로, 이를 통해 URL에 따라 다른 컴포넌트를 보여주고, 사용자가 원하는 경로에 맞춰 페이지를 이동하는 것처럼 보이도록 해줍니다. React Router는 다양한 구성 요소와 API를 통해 유연한 라우팅 기능을 제공합니다.

 

주요 구성 요소와 기능

 

1. BrowserRouter와 HashRouter:

• BrowserRouter: HTML5의 history API를 사용하여 주소를 관리하며, 가장 널리 사용되는 방식입니다. 일반적인 URL 구조를 따르며 서버와의 호환성이 뛰어납니다.

• HashRouter: URL에 # 기호를 포함하여 페이지의 일부로 구분하며, 서버 설정에 관계없이 사용할 수 있지만 SEO(검색 엔진 최적화)에는 불리합니다.

2. Routes와 Route:

• Routes: 라우팅을 관리하는 상위 컴포넌트로, 여러 Route를 그룹화하여 URL 경로에 따라 특정 컴포넌트를 렌더링하도록 설정합니다.

• Route: path와 element 속성을 사용하여 URL 경로와 해당 경로에서 렌더링할 컴포넌트를 지정합니다. 특정 경로와 연결된 컴포넌트를 화면에 렌더링할 때 사용합니다.

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

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

 

3. Link와 NavLink:

• Link: 페이지 전환을 위한 링크를 생성하는 컴포넌트입니다. <a> 태그와 비슷하게 작동하지만, 실제로 페이지를 새로고침하지 않고 컴포넌트를 전환합니다.

• NavLink: Link와 유사하지만, 현재 URL과 일치하는 경우 특정 스타일을 추가할 수 있어 현재 활성화된 경로를 표시하는 네비게이션 링크로 주로 사용됩니다.

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

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

 

4. useNavigate:

• 프로그래밍적으로 페이지 이동이 필요할 때 사용하는 훅으로, 클릭 이벤트 또는 조건에 따라 특정 경로로 리다이렉션할 때 사용됩니다.

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

function Home() {
  const navigate = useNavigate();

  const goToContact = () => {
    navigate('/contact');
  };

  return <button onClick={goToContact}>Contact Us</button>;
}

 

5. Nested Routes (중첩 라우팅):

• 중첩된 컴포넌트를 위해 중첩 라우트를 구성할 수 있습니다. 중첩 라우트는 부모 라우트의 UI 일부를 유지한 상태에서 자식 경로에 따라 하위 컴포넌트를 렌더링합니다.

function Dashboard() {
  return (
    <Routes>
      <Route path="/" element={<DashboardHome />} />
      <Route path="profile" element={<UserProfile />} />
      <Route path="settings" element={<Settings />} />
    </Routes>
  );
}

 

6. Outlet:

• 중첩된 라우트가 렌더링될 위치를 정의하는 컴포넌트로, 부모 컴포넌트 내에서 자식 라우트가 표시될 자리를 나타냅니다.

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

function Layout() {
  return (
    <div>
      <h1>My Website</h1>
      <Outlet />
    </div>
  );
}

 

React Router의 장점

 

• SPA에 최적화: 페이지 새로고침 없이 화면 전환이 가능해 사용자 경험을 개선합니다.

• 동적 라우팅 지원: 다양한 URL 패턴에 맞게 동적 라우팅이 가능합니다.

• History API 활용: 브라우저의 뒤로 가기, 앞으로 가기 기능을 손쉽게 제어할 수 있습니다.

• 리다이렉션 및 인증 처리: 특정 경로 접근 제한과 인증 기능을 구현하기에 용이합니다.

 

React Router는 React 애플리케이션에서 필요한 다양한 라우팅 요구사항을 만족시킬 수 있어, 사용자가 매끄럽게 여러 페이지를 탐색할 수 있도록 지원합니다.