React Router

1. React Router 의 개념

Router에는 여러 종류가 있다. 

• BrowserRouter : 브라우저의 history API를 사용, URL이 깔끔하게 유지
• HashRouter : URL에 #를 포함, 서버 설정이 필요 없지만 SEO에 불리함
• MemoryRouter : 메모리에서 라우팅 정보를 유지. 브라우저 히스토리를 사용하지 않는 환경(테스트용 등) 적합

1-1. 라우트의 정의

path 와 렌더링할 컴포넌트를 정의

중첩 라우트를 부모 - 자식 관계 정리

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { path: 'home', element: <Home /> },
      { path: 'about', element: <About /> },
      { path: 'todolist', element: <TodoList /> },
    ],
  },
]);

 

1-2. Link와 NavLink

• 페이지 간 이동을 위한 컴포넌트
• Link 단순 이동
• NavLink 현재 견로에 따라 활성화 상태를 제공

 

1-3. Outlet

• 중첩 라우트에서 자식 컴포넌트를 렌더링하는 위치를 지정
• Layout 컴포넌트와 함께 사용

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

function Layout() {
  return (
    <div>
      <Header />
      <Outlet /> {/* 여기에서 자식 라우트가 렌더링됨 */}
      <Footer />
    </div>
  );
}

 

2. React Router 주요 기능

1. 라우트 보호 : 인즈 여부에 따라 접근 가능 여부 설정

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

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

 

2. 라우트 매개변수(params) : URL의 동적 값을 처리

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

function Detail() {
  const { id } = useParams(); // URL에서 id 값 가져오기
  return <div>Detail Page for ID: {id}</div>;
}

 

라우터 설정

{ path: 'details/:id', element: <Detail /> }

 

3. Query String : URL의 쿼리 문자열을 처리하려면 useSearchParams를 사용

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

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q'); // 쿼리 값 가져오기
  return <div>Search for: {query}</div>;
}

 

4. 404페이지 처리: 정의되지 않은 경로에 대해 사용자 지정 페이지를 보여줌

{ path: '*', element: <NotFound /> }

 

5. 라우트 내 데이터 로딩 : 컴포넌트 렌더링 전에 데이터를 불러옴

const loader = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

{ path: 'data', element: <DataPage />, loader }

 

3. 주로 쓰이는 패턴

1. 기본 경로에서 특정 컴포넌트 렌더링

{ index: true, element: <Home /> }

 

2. SPA에서 404 방지 : 서버 설정 추가(Netlify, Vercel 등)

3. BreadCrumb 또는 네비게이션 추적: 현재 경로를 기준으로 동적 UI 렌더링