react-router-dom

react-router-dom은 React 애플리케이션에서 페이지 간의 네비게이션(라우팅)을 관리하는 패키지입니다. 주로 SPA(Single Page Application)에서 사용되며, 브라우저의 URL 변화에 따라 컴포넌트를 동적으로 렌더링할 수 있게 해줍니다. 이를 통해 React 애플리케이션은 페이지 전환 시 새로고침 없이 매끄럽게 페이지가 전환되는 사용자 경험을 제공합니다.

1. react-router-dom 설치

라우팅 기능을 사용하려면 react-router-dom 패키지를 설치해야 합니다.

npm install react-router-dom

설치 후, 라우터 컴포넌트와 다양한 라우팅 기능을 사용할 수 있습니다.

---

2. BrowserRouter와 HashRouter

React Router에서는 두 가지 기본 라우터가 제공됩니다:

• BrowserRouter: HTML5의 히스토리 API를 사용하여 브라우저의 URL을 조작합니다. 보통 일반적인 웹 애플리케이션에서 사용됩니다.
• HashRouter: URL에 해시(#)를 포함하여 경로를 지정합니다. 서버 설정이 필요 없거나 GitHub Pages와 같은 특정 환경에서 사용됩니다.

일반적으로 SPA 애플리케이션에서는 BrowserRouter가 권장됩니다.

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

function App() {
  return (
    <Router>
      {/* 라우트 설정 */}
    </Router>
  );
}

export default App;

위 코드에서 BrowserRouter를 Router라는 이름으로 사용하고 있으며, 라우트 설정을 이 내부에 넣어야 합니다.

---

3. Route와 Routes

• Route: 특정 URL 경로에 따라 어떤 컴포넌트를 렌더링할지 정의합니다.
• Routes: 여러 개의 Route를 감싸며, 현재 URL에 맞는 하나의 Route만 렌더링해주는 컨테이너 역할을 합니다.

예제: Routes와 Route 설정

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

export default App;

설명:

• path="/": 루트 경로(localhost:3000/)에서 Home 컴포넌트를 렌더링합니다.
• path="/about": /about 경로에서 About 컴포넌트를 렌더링합니다.
• element={<Component />}: 경로와 연결된 컴포넌트를 설정합니다.

Routes를 사용하면 URL 경로에 따라 맞는 Route 하나만 렌더링됩니다.

---

4. 네비게이션 - Link와 NavLink

React Router는 링크를 사용해 페이지 간 이동을 구현합니다. 기본 HTML의 <a> 태그 대신 Link와 NavLink 컴포넌트를 사용하여 새로고침 없이 페이지 이동을 할 수 있습니다.

• Link: 클릭 시 지정된 경로로 이동합니다.
• NavLink: Link와 비슷하지만, 현재 활성화된 경로에 따라 스타일을 적용할 수 있습니다.

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

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

export default Navbar;

설명:

• Link: to 속성으로 이동할 경로를 지정하여 페이지 이동을 구현합니다.
• NavLink: activeClassName="active"를 설정하면 현재 경로와 일치할 때 active 클래스가 추가됩니다. 이를 통해 활성화된 링크에 스타일을 적용할 수 있습니다.

---

5. URL 파라미터와 useParams

React Router에서는 URL 파라미터를 통해 동적 경로를 만들 수 있습니다. 예를 들어, /users/:id와 같이 :를 사용해 변수 부분을 설정하면 URL의 일부를 파라미터로 활용할 수 있습니다.

예제: URL 파라미터 사용

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

function UserProfile() {
  const { id } = useParams(); // URL에서 id 파라미터 가져오기

  return <h1>User Profile ID: {id}</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

설명:

• path="/user/:id": id는 URL 파라미터로 사용되며, /user/1, /user/2처럼 동적으로 값을 받을 수 있습니다.
• useParams(): 현재 URL에서 파라미터를 추출해 사용할 수 있습니다.

---

6. 프로그래밍 방식의 네비게이션 - useNavigate

useNavigate 훅을 통해 특정 조건에 따라 프로그래밍적으로 페이지 이동을 구현할 수 있습니다. 이는 이벤트 발생 시 특정 페이지로 이동할 때 유용합니다.

예제: useNavigate를 사용한 페이지 이동

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

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

  function goToProfile() {
    navigate('/profile'); // 프로필 페이지로 이동
  }

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
}

설명:

• useNavigate: 페이지를 이동할 수 있는 navigate 함수를 반환합니다.
• 조건부 네비게이션: 사용자가 특정 조건을 만족할 때 다른 페이지로 이동하는 상황에 유용하게 사용할 수 있습니다.

---

7. 중첩된 라우트

중첩된 라우트는 특정 컴포넌트 내부에 하위 컴포넌트를 렌더링할 때 유용합니다. 예를 들어, 대시보드 페이지에 프로필 페이지와 설정 페이지가 중첩될 수 있습니다.

예제: 중첩된 라우트

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 하위 라우트를 렌더링할 위치 */}
    </div>
  );
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

설명:

• Dashboard 컴포넌트: Outlet을 포함하여 중첩된 경로의 컴포넌트를 렌더링할 위치를 지정합니다.
• 중첩 라우트 경로 설정: /dashboard/settings나 /dashboard/profile 경로가 Dashboard 아래에서 중첩되어 렌더링됩니다.

---

8. useLocation으로 현재 경로 정보 확인

useLocation 훅은 현재 경로와 관련된 정보를 제공합니다. 경로 기반으로 UI를 조작하거나 현재 경로에 따라 다른 동작을 수행할 때 유용합니다.

예제: useLocation을 통한 현재 경로 사용

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

function Header() {
  const location = useLocation();

  return (
    <header>
      <h1>{location.pathname === '/' ? 'Home Page' : 'Other Page'}</h1>
    </header>
  );
}

설명:

• location.pathname: 현재 URL 경로를 가져옵니다. 이를 통해 특정 경로에 따라 다른 UI를 표시할 수 있습니다.

---

9. 쿼리 파라미터 관리 - useSearchParams

React Router v6에서는 useSearchParams 훅을 제공해 쿼리 파라미터를 쉽게 읽고 업데이트할 수 있습니다. 쿼리 파라미터는 필터링 조건이나 검색 키워드를

URL에 전달하는 방식입니다.

예제: useSearchParams로 쿼리 파라미터 설정

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

function FilterPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  const updateFilter = (filter) => {
    setSearchParams({ filter }); // 쿼리 파라미터 업데이트
  };

  return (
    <div>
      <h1>Current Filter: {searchParams.get('filter')}</h1>
      <button onClick={() => updateFilter('new')}>Set Filter to 'new'</button>
    </div>
  );
}

설명:

• searchParams.get('filter'): 현재 쿼리 파라미터를 가져옵니다.
• setSearchParams: 동적으로 쿼리 파라미터를 업데이트합니다.

---

요약

React Router는 SPA 애플리케이션에서 URL 경로에 따라 페이지 간의 이동을 관리하고, URL에 따른 동적인 컴포넌트 렌더링을 지원합니다. 주요 개념은 다음과 같습니다:

• BrowserRouter와 Routes, Route: URL 경로와 컴포넌트를 연결하여 화면을 구성.
• Link, NavLink, useNavigate: 페이지 간 이동 및 동적 네비게이션 제공.
• useParams, useLocation, useSearchParams: URL 정보와 파라미터를 가져와 다양한 상황에 활용.
• 중첩 라우트: 특정 컴포넌트 내부에 하위 경로 설정.

이러한 기능들을 통해 React 애플리케이션에서 유연하고 효율적인 네비게이션을 구현할 수 있습니다.