[새싹 성동 2기] 4-3. 리액트 라우터

목차

 

1. 기본 개념     

2. 기본 사용법 

3. 활용 방법    

4. 고급 기능    

 

 

[1] 기본 개념

 

- SPA(Single-Page Application)의 라우팅을 관리하기 위한 라이브러리

- 브라우저에서 페이지를 리로드하지 않고도 URL을 변경하고, 해당 URL에 따라 적절한 컴포넌트를 렌더링할 수 있음

  ※ 라우팅: URL 경로에 따라 다른 화면(컴포넌트)을 보여주는 방식

 

 

[2] 기본 사용법

  (1) Route 컴포넌트 : 경로에 맞는 컴포넌트 렌더링

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

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

// Route는 특정 경로(URL)에 따라 렌더링할 컴포넌트를 설정함
// 모든 Route 컴포넌트는 Routes 컴포넌트로 감싸야 함

 

 (2) Link 컴포넌트 : 페이지 이동을 위한 링크 설정

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

// Link는 브라우저의 기본 <a> 태그를 대체하며, 페이지 리로드 없이 경로를 변경함
// to 속성에 이동하려는 경로를 지정함

 

 (3) NavLink 컴포넌트 : 활성화 상태 스타일링

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>
        Home
      </NavLink>
      <NavLink to="/about">About</NavLink>
    </nav>
  );
}

// NavLink는 Link와 비슷하지만, 활성화 상태를 스타일링하거나 특정 클래스명을 부여할 수 있음
// 활성화된 링크에 active 클래스를 자동으로 추가

 

 (4) Navigate 컴포넌트 : 페이지 리다이렉트

 

import { Navigate } from "react-router-dom";

const ProtectedRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : <Navigate to="/" />;
};

// App.js
<Router>
  <Routes>
    <Route
      path="/dashboard"
      element={
        <ProtectedRoute isAuthenticated={true}>
          <Dashboard />
        </ProtectedRoute>
      }
    />
  </Routes>
</Router>;

 

 

[3] 활용 방법

 - 가변 데이터 처리

   (1) useParams Hook : URL에서 동적으로 변하는 값을 처리할 때 사용

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

function UserProfile() {
  const { id } = useParams(); // URL에서 id 값 추출
  return <h1>User ID: {id}</h1>;
}

// 라우트 설정
<Route path="/user/:id" element={<UserProfile />} />

 

   (2) useLocation Hook : URL의 쿼리 스트링(예: ?key=value)을 처리할 때 사용

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

function Search() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const keyword = queryParams.get('keyword'); // 쿼리 값 추출

  return <h1>Search Keyword: {keyword}</h1>;
}

// URL: /search?keyword=react

 

 - qs 라이브러리 : 쿼리 문자열을 객체로 변환하거나, 객체를 쿼리 문자열로 변환할 때 사용

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

function Search() {
  const location = useLocation();
  const queryParams = qs.parse(location.search, { ignoreQueryPrefix: true });
  const keyword = queryParams.keyword;

  return <h1>Search Keyword: {keyword}</h1>;
}

 

 - Route 하나에 여러 path 설정: 하나의 Route로 여러 경로 처리

<Route path={['/about', '/info']} element={<About />} />

 

 

[4] 고급 기능

 - 서브 라우트(=중첩 라우트) : 라우트 내부에 라우트를 정의하여 계층적 라우팅 구조를 구현

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 서브 라우트가 여기에 렌더링 */}
    </div>
  );
}

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

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

// 라우트 설정
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="reports" element={<Reports />} />
  </Route>
</Routes>;

 

 - 레이아웃 컴포넌트 : 중첩 라우트와 Outlet 컴포넌트를 이용해 각 페이지에서 공통적으로 보여줘야 하는 레이아웃을 처리할 때 유용

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

function Layout() {
  return (
    <div>
      <header>Header</header>
      <main>
        <Outlet /> {/* 자식 라우트가 렌더링 */}
      </main>
      <footer>Footer</footer>
    </div>
  );
}

// 라우트 설정
<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact />} />
  </Route>
</Routes>;

 

 - useNavigate Hook : Link 컴포넌트를 사용하지 않고 페이지를 이동할 때 사용하는 훅 함수(프로그래밍 방식으로 페이지를 이동)

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

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

  const handleLogin = () => {
    // 로그인 후 이동
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}