React Router의 주요 기능 상세 설명

React Router의 주요 기능 상세 설명

1. 링크 컴포넌트 (Link)

Link 컴포넌트는 페이지를 새로고침하지 않고 라우트 간 네비게이션을 구현합니다:

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

<Link to="/about">소개 페이지로 이동</Link>

2. 동적 라우트 파라미터

URL에서 동적 값을 추출하여 사용할 수 있습니다:

// 라우트 정의
<Route path="products/:id" element={<ProductDetail />} />

// 파라미터 사용
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  // ...
}

3. 프로그래밍 방식의 내비게이션

useNavigate 훅을 사용하여 코드에서 페이지 이동을 구현할 수 있습니다:

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

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

  function handleDelete() {
    // 제품 삭제 후
    navigate('/products');
  }

  // 뒤로 가기
  function goBack() {
    navigate(-1);
  }

  // 상대 경로 사용
  function goToRelated() {
    navigate('../related', { relative: 'path' });
  }

  // 상태와 함께 이동 (히스토리 상태)
  function goWithState() {
    navigate('/success', { state: { message: '성공적으로 처리되었습니다!' } });
  }
}

4. 라우트 상태 접근하기

페이지 이동 시 전달된 상태에 접근할 수 있습니다:

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

function SuccessPage() {
  const location = useLocation();
  const message = location.state?.message;

  return (
    <div>
      <h1>성공!</h1>
      {message && <p>{message}</p>}
    </div>
  );
}

5. 쿼리 파라미터 처리

URL의 쿼리 문자열을 처리할 수 있습니다:

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

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');
  const category = searchParams.get('category');

  // 쿼리 파라미터 변경
  function updateCategory(newCategory) {
    setSearchParams({ q: query, category: newCategory });
  }

  return (
    <div>
      <h1>검색 결과: {query}</h1>
      {category && <p>카테고리: {category}</p>}
      <button onClick={() => updateCategory('electronics')}>전자기기</button>
      <button onClick={() => updateCategory('clothing')}>의류</button>
    </div>
  );
}

6. 중첩 라우트

라우트를 중첩하여 더 복잡한 레이아웃을 구현할 수 있습니다:

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route index element={<Overview />} />
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Dashboard 컴포넌트에는 <Outlet /> 컴포넌트를 포함해야 중첩된 라우트가 렌더링됩니다:

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

function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <nav>
        <Link to="/dashboard">개요</Link>
        <Link to="/dashboard/stats">통계</Link>
        <Link to="/dashboard/settings">설정</Link>
      </nav>
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

7. 보호된 라우트 (Route Guards)

인증된 사용자만 접근할 수 있는 라우트를 구현할 수 있습니다:

function RequireAuth({ children }) {
  const auth = useAuth(); // 사용자 정의 인증 훅
  const location = useLocation();

  if (!auth.isAuthenticated) {
    // 로그인 페이지로 리디렉션하면서 현재 위치 저장
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

// 라우트 정의에서 사용
<Route
  path="dashboard"
  element={
    <RequireAuth>
      <Dashboard />
    </RequireAuth>
  }
/>

8. 액티브 링크 스타일링

현재 활성화된 링크에 스타일을 적용할 수 있습니다:

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

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        홈
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        소개
      </NavLink>
    </nav>
  );
}