[React] 라우터

p-q·2023년 4월 6일
Reactreact router
0

react

목록 보기
1/5

라우트 정의하기

라우트를 정의하기 위해 프로젝트에 "react-router-dom" 패키지를 다운로드 및 설치 해주어야 합니다.

React Router

웹 애플리케이션에서 라우팅 및 탐색을 쉽게 처리할 수 있는 React용 라이브러리입니다. "react-router-dom"은 React Router에 DOM 바인딩을 제공하는 특정 패키지입니다. 
npm install react-router-dom

이 명령은 프로젝트에 "react-router-dom" 패키지를 다운로드 및 설치하고 package.json 파일의 프로젝트 종속 항목에도 추가합니다. 설치가 완료되면 "react-router-dom"에서 필요한 구성 요소를 가져와 코드에서 사용하여 라우팅 및 탐색을 처리할 수 있습니다.

프로젝트의 src 폴더 내부에 pages 폴더를 생성한 후, Home.js 파일을 생성합니다.

import React from 'react';

const Home = () => {
  return (
    <div>
      My Home Page
    </div>
  );
};

export default Home;

App.js 파일에서는 "createBrowserRouter" 함수를 사용하여 라우터 객체를 생성하고, "RouterProvider" 컴포넌트를 사용하여 전체 프로그램에서 라우터 객체를 사용할 수 있도록 만들어줍니다.

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Products from './pages/ProductsPage';

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/products', element: <Products /> },
])


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

export default App;

라우터 객체를 생성할 때는 "createRoutes" 함수를 사용합니다. 이 함수는 라우트 객체 배열을 인수로 받아 라우터 객체를 생성합니다. 각 라우트 객체는 URL 경로와 해당 경로에서 렌더링될 컴포넌트를 지정합니다. 위의 코드에서는 '/' 경로에는 Home 컴포넌트가, '/products' 경로에는 Products 컴포넌트가 렌더링되도록 지정했습니다.

이렇게 생성된 라우터 객체는 "RouterProvider" 컴포넌트의 "router" prop으로 전달됩니다. 이렇게 함으로써 전체 프로그램에서 라우터 객체를 사용할 수 있게 됩니다.

"<a>" 태그와 같은 일반적인 HTML 요소를 사용하여 클라이언트 측에서 URL을 변경하는 경우 서버에 요청이 전송되며 리액트 애플리케이션이 다시 로드됩니다. 이는 SPA의 장점 중 하나인 빠른 페이지 로드와 상태 유지의 이점을 상실시킬 수 있습니다.

LINK

Link 컴포넌트는 React Router DOM의 핵심 기능입니다. 이를 통해 개발자는 전체 페이지를 새로 고치지 않고 브라우저에서 URL을 업데이트하는 링크를 생성하여 원활하고 원활한 사용자 경험을 제공할 수 있습니다.

이전에 작성한 Home 컴포넌트 파일에는 Link 컴포넌트를 추가했습니다. Link 컴포넌트를 이용하면 클라이언트 측 라우팅을 하면서도 SPA의 이점을 유지할 수 있습니다. 예를 들어, Home 컴포넌트에는 "/products" 경로로 이동하는 링크를 추가했습니다.

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

const Home = () => {
  return (
    <>
      <h1>My Home Page</h1>
      <p>
        <Link to="/products">the list of products</Link>
      </p>
    </>
  );
};

export default Home;

이제 Link를 추가한 Home 컴포넌트에서 링크를 클릭하면 서버에 요청하지 않고 클라이언트 측 라우팅으로 Products 컴포넌트가 로드됩니다. Link 컴포넌트에서 to는 이동할 경로를 지정하는 데 사용됩니다. 이 속성은 문자열 또는 객체로 지정할 수 있습니다.

레이아웃 및 중첩라우트

중첩된 라우팅

하나의 경로에 여러 개의 하위 경로를 가지는 것을 말합니다. 이것은 웹 사이트에서 중첩된 메뉴를 구현하거나, 상품 리스트와 상세 페이지를 같은 경로에서 처리하는 경우 등에 사용될 수 있습니다.

MainNavigation 컴포넌트는 모든 페이지에서 사용하는 네비게이션을 제공하기 위해 페이지로써 로딩되지 않고 다른 컴포넌트에 포함되도록 컴포넌트 디렉토리를 생성하여 작성합니다.

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

import classes from './MainNavigation.module.css';

const MainNavigation = () => {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      
    </header>
  );
};

export default MainNavigation;

Link 컴포넌트는 Router에 의해 제공되는 컴포넌트이므로, MainNavigation 컴포넌트가 Router 밖에서 사용될 경우, Link 컴포넌트가 정상적으로 작동하지 않을 수 있습니다. 따라서, Router를 제공해주어야 합니다.

RootLayout 컴포넌트를 생성하여 Router를 제공해줍니다. Outlet 컴포넌트는 Route 컴포넌트에서 element prop으로 지정한 컴포넌트의 자식 컴포넌트를 렌더링해주는 역할을 합니다.

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

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

export default RootLayot;

App.js 파일도 수정해주어야 합니다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/products', element: <Products /> },
    ]
  }
])

React Router에서는 중첩된 라우팅을 구현하기 위해, 상위 경로에 children 속성을 추가하고, 해당 속성에 하위 경로를 설정합니다. 이렇게 하위 경로를 설정하면, React Router가 이를 인식하여 중첩된 라우팅을 구현합니다.

동적라우트 사용하기

App.js의 라우터 객체를 수정하여 동적 라우팅이 가능하도록 변경해줍니다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <ErrorPage/>,
    children: [
      { path: '/', element: <HomePage /> },
      { path: '/products', element: <Products /> },
       //동적 라우트 추가
      { path: '/products/:productId', element: <ProductDetailPage/> },
      { path: '*', element: <ErrorPage /> },
    ],
  }
])

위와 같이 :productId와 같은 파라미터를 추가해 동적 라우팅이 가능하도록 변경해줍니다.

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

const PRODUCTS = [
  { id: 'product-1', name: 'Product 1' },
  { id: 'product-2', name: 'Product 2' },
  { id: 'product-3', name: 'Product 3' },
];

const ProductsPage = () => {
  return (
    <div>
      <h1>ProductsPage</h1>
      <ul>
        {PRODUCTS.map((product) => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductsPage;

위 코드에서는 ProductPage 컴포넌트를 수정하여 동적으로 파라미터를 할당해줍니다.

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

const ProductDetailPage = () => {
  const params = useParams();

  return (
    <>
      <h1>ProductDetailPage</h1>
      <p>{params.productId}</p>
    </>
  );
};

export default ProductDetailPage;

마지막으로 ProductDetailPage 컴포넌트를 추가하여 상세 페이지를 구현해줍니다. 이제 각 제품에 대한 상세 정보를 보여줄 수 있게 되었습니다.

상대경로와 절대경로

상대경로와 절대경로를 구분하는 방법은 경로 앞에 '/'가 있는지 여부입니다. 경로 앞에 '/'가 있으면 절대경로, 없으면 상대경로입니다.

상대경로

상대경로는 현재 경로를 기준으로 한 경로입니다. 예를 들어, 현재 경로가 '/products'이고 링크에 '/detail'이라는 상대경로를 사용하면 '/products/detail' 경로로 이동합니다. 상대경로는 현재 경로에 따라 동적으로 변경되기 때문에 코드의 재사용성을 높여주는 장점이 있습니다.

절대경로

절대경로는 항상 같은 경로를 가리키는 경로입니다. 예를 들어, 절대경로 '/detail'은 어떤 경로에서도 '/detail' 경로로 이동합니다. 절대경로는 항상 같은 경로를 가리키기 때문에 코드의 유지보수성을 높여주는 장점이 있습니다.

React Router에서는 Link 컴포넌트를 이용하여 경로를 변경할 수 있습니다. Link 컴포넌트에 to 속성을 이용하여 경로를 설정합니다.

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

<Link to="/detail">Go to detail page</Link>

위 코드는 절대경로 '/detail'로 이동하는 링크를 생성합니다. 상대경로를 이용하려면 '../' 같은 상대경로 표기법을 사용합니다.

<Link to="../detail">Go to detail page</Link>

프로그래밍 방식으로 경로 변경

React Router에서는 history 객체를 이용하여 프로그래밍 방식으로 경로를 변경할 수 있습니다. useHistory Hook을 이용하면 history 객체를 가져올 수 있습니다.

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

const history = useHistory();

function handleClick() {
  history.push('/detail');
}

위 코드는 handleClick 함수가 실행될 때, '/detail' 경로로 이동합니다.

Link 컴포넌트에서는 to prop을 사용하여 상대경로를 생성할 수 있습니다. 예를 들어, 현재 경로가 '/products'이고 링크에 '../detail'이라는 상대경로를 사용하면 '/detail' 경로로 이동합니다.

<Link to="../detail">Go to detail page</Link>
profile
p-q
ppppqqqq
다음 포스트

[React] 라우터 - 고급기능

0개의 댓글