React _ 라우팅 및 페이지

비교적 여러 프로젝트로 인해 페이지에 관한 지식은 아직 남아있다.

하지만 내가 작동원리에 대해 정확히 아느냐?

그건 No 다.

어찌어찌 프로젝트 완성시키기는 되겠지만 깊은 이해가 어느 정도 필요하다고 생각이 든다.

 

일단 기본적인 페이지 라우팅 설정이다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";

const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductsPage /> },
]);

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

export default App;

 

react-router-dom을 통해서 createBrowerRouter를 통해 페이지 주소와 컴포넌트 옵션을 걸어주면 되고

return으로 provider의 prob을 통해 해당 router를 전달한다.

 

만약 주소가 http://localhost:3000 라면 위의 / 는 3000 이후로의 주소가 된다.

products의 주소는 http://localhost:3000/products 가 되는 거다.

근데 기본 home의 경우, 후에 뭐 이거조차 설정을 할 수 있지만 / 는 생략된다.

 

또 하나 알아두면 좋을 것이 있는데 href로 페이지를 이동하는 건데

겉으로 보기에는 정상 작동하는 거처럼 보이겠지만

우리가 react를 쓰는 이유는 single page 랜더링의 장점을 살리기 위해서인데

해당 href를 사용하게 되면 전체 페이지를 리로드 하게 되고 다시 html을 다운로드하여서 사용하게 되기 때문에

장점이 사라진다. 그래서 react-router-dom안의 Link 기능을 이용하여 페이지를 이동시키는 것이 바람직하다.

아래는 예시코드이다.

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

function HomePage() {
  return (
    <>
      <h1>Hello World!</h1>
      <a href="/products">Go to Products Page</a>
      <Link to="/products">Go to Products Page</Link>
    </>
  );
}

export default HomePage;

 

추가적으로 보통 내비게이션 Bar를 항상 헤더 쪽에 둬서 세팅을 하기 때문에 컴포넌트 들을 적절하게 섞어야 하기 때문에

Rootpage를 하나 만들어서 컴포넌트를 세팅해야 한다. 그리고 나머지 컴포넌트들은 Root의 children으로 넣어야 한다.

아래는 구체적인 예시이다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
import RootLayout from "./pages/Root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/products", element: <ProductsPage /> },
    ],
  },
]);

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

export default App;

 

import { Outlet } from "react-router-dom";
import MainNavigation from "../\bcomponents/MainNavigation";
import classes from "./Root.module.css";

function RootLayout() {
  return (
    <>
      <MainNavigation />
      <main className={classes.content}>
        <Outlet />
      </main>
    </>
  );
}

export default RootLayout;

 

그리고 두 번째 코드와 같이 Outlet을 통해서 children에 값들을 불러올 수 있다.