[React] Router

React Router

---

: React 애플리케이션에서 라우팅 기능을 제공하는 라이브러리로

URL과 React 컴포넌트를 매핑해 페이지 간 전환 처리

-특징 : 동적 라우팅, 중첩 라우팅, URL변경 새로고침없이 콘텐츠 업데이트

 

*라우팅?

요청 URL에 맞는 페이지를 보여주는 것

설치 (createBrowserRouter도 쓸거라 최신버전으로 받음)

npm install react-router-dom@latest

 

BrowserRouter

---

: 기본 라우팅 설정을 위한 컴포넌트

-Router.tsx

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

function Router() {
    return (
        <Router>
            <nav>
            	<Link to="/">Home</Link> #홈컴포넌트 렌더링
            </nav>
            <Routes>
            	<Route path="/" element={<Home />} /> #매핑
            	{/* 추가 라우트들 */}
            </Routes>
        </Router>
    );
}

export default Router;

-루트파일 (App.tsx)

function App() {
    return(
    	<Router />
    )
}

 

- 주요 컴포넌트

• BrowserRouter
  • 애플리케이션을 라우팅으로 감싸는 최상위 컴포넌트.
  • URL의 히스토리를 관리
•  Routes
  • 라우트의 컬렉션을 정의하는 컨테이너.

• Route
  • 특정 URL과 컴포넌트를 매핑.

 

- 주요 기능

1. 동적 라우팅

동적 세그먼트를 통해 얻은 url 파라미터(매개변수)를 사용해 동적 페이지 구현 가능

 

*동적세그먼트?

/products/:category/:id

     :category와 :id 가 동적 세그먼트로 URL의 특정 부분이 동적으로 변할 수 있음을 의미

      ex) /products/camera/p1234 -> category값 camera  |   id의 값 p1234 가 되는것

 

function UserProfile() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

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

(결과)

 

2. 중첩 라우팅

하나의 페이지 내에 여러 수준의 라우트를 중첩하여 복잡한 뷰 계층을 관리

• Outlet : 중첩된 라우트에서 하위 컴포넌트를 렌더링하는 위치를 정의

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 중첩된 라우트 출력 */}
    </div>
  );
}

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

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

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

(결과)

/dashboard/profile → Profile Page

/dashboard/settings → Settings Page

*중첩된 라우트 컴포넌트 네에서 공통 데이터 전달시

const user = { name: 'John', age: 30 };

<Outlet context={user}>

//하위컴포넌트에서의 접근
const user = useOutletContext<{ name: string; age: number }>();
return (
	<p>Name: {user.name}</p>
)

 

CreateBrowserRouter

---

: React Router v6.4 이상에서 도입된 API로, 기존의 BrowserRouter보다 더 강력하고 유연한 라우팅 설정을 제공

function Layout() {
  return (
    <>
      <h2>Layout</h2>
      <Outlet />
    </>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function ErrorPage() {
  return <h1>Error Page</h1>;
}

//src/router/router.js
//라우터 설정
// "/"  =>  <Layout />과 <Layout />에있는 <Outlet />에 <Home />실행
const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "/", element: <Home /> },
      { path: "about", element: <About /> },
    ],
  }
]);

export default router;

// src/App.js
function App() {
  return (
    <RouterProvider router={router} />
  );
}

(결과)

 

 

-주요 옵션

• path: URL 경로 지정
• element: 해당 경로로 접속했을 때 렌더링할 컴포넌트 지정
• errorElement: 해당 라우트에서 발생한 오류를 처리할 컴포넌트를 지정 가능
• children: 중첩된 라우트를 설정할 때 사용. ex) / 경로 하위에 여러 경로를 설정할 때 사용
• loader: 데이터 로딩에 사용할 수 있는 함수로, 비동기 데이터를 라우트에 전달 가능
• action: 폼 제출과 같은 상호작용을 처리.

( loader , action  예시)

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    loader: async () => {  // 데이터 로드
      const response = await fetch("/api/data");
      return response.json();
    },
    action: async ({ request }) => {
      const formData = await request.formData();
      return fetch("/api/submit", {
        method: "POST",
        body: formData,
    })},
    errorElement: <ErrorPage />,
    children: [
      { path: "/", element: <Home /> },
      { path: "about", element: <About /> },
    ],
  }
]);

 

* BrowserRouter? createBrowserRouter?

• 간단한 라우팅이 필요한 경우: BrowserRouter 더 적합
• 복잡한 라우팅, 데이터 페칭, 에러 핸들링이 필요한 경우: createBrowserRouter가 더 유연 (권장)