React router

최 재성·2023년 8월 2일

목록 보기

15/15

시작

npm i react-router-dom
import {createBrowserRouter} from 'react-router-dom'
import {RouterProvider} from 'react-router-dom'
router 변수 만들기

const router = createBrowserRouter([
  {path: '/', element: 라우팅할 컴포넌트},
}])

도메인 뒤에 path(경로)를 확인하고 element를 렌더링해줌.
ex) https://example.com/'path'

return <RouterProvider router = {router}/>

children 속성

 const router = createBrowserRouter([
    {
      path: "/",
      element: <Root />,
      children: [
      //자녀 라우트 생성, 상대경로로 정의하면 부모 경로에 연결됨
        { path: "", element: <HomePage /> },
        { path: "products", element: <Products /> },
      ],
    },
  ]);

부모 라우터에서 자녀 라우트 생성.
* 부모 라우트 요소에서 자녀 라우트 컴포넌트 요소가 어디에 있는지 정의해야함. (Outlet)

부모 라우트 요소로 이동.

import { Outlet } from "react-router-dom"

  return (
    <>
      <h2>Root Layout</h2>;
      <Outlet />
    </>
  );
};

<Outlet> 컴포넌트를 사용하면, 자녀 라우트 컴포넌트가 해당 공간에 렌더링됩니다. Outlet 컴포넌트는 자녀 라우트의 컴포넌트들을 렌더링하는 역할을 합니다. 이를 통해 부모와 자녀 라우트 사이의 중첩된 구조를 구현할 수 있습니다.

index 속성(index route)

   path: "/",
      element: <Root />,
      children: [
        {
          index: true,
          path:'',
          element: <Home />,
        },

부모 라우트가 활성화 했을때 기본으로 로딩되어야하는 기본 라우트를 정의함.

loader 속성

loader 속성은 함수를 값으로 취하는 프로퍼티 입니다. 위 라우터를 방문하기 직전에 항상 loader 함수를 먼저 실행하게 되는데, 즉 jsx 코드가 렌더링 되기 직전에 loader의 함수가 리액트 라우터에 의해 트리거 되고 실행됩니다.
loader 속성으로 라우터가 활성될때마다 데이터를 로딩하거나 가져올수 있습니다.

 {
          path: "events",
          element: <RootEventPage />,
          children: [
            {
              index: true,
              element: <EventsPage />,
              loader: async () => {
                const response = await fetch("http://localhost:8080/events");

                if (!response.ok) {
                  //
                } else {
                  const resData = await response.json();
                  return resData.event;
                }
              },
            },

EventsPage(데이터를 받을 컴포넌트) 컴포넌트 내에 load 함수를 따로 만들어서 사용하면 더욱 깔끔해닙니다.

export async function load() {
  const response = await fetch("http://localhost:8080/events");

  if (!response.ok) {
    //
  } else {
    const resData = await response.json();
    return resData.events;
  }

{
          path: "events",
          element: <RootEventPage />,
          children: [
            {
              index: true,
              element: <EventsPage />,
              loader: eventLoad,
            },

useLoaderData()

1.가장 가까운 loader 데이터에 엑서스 할수있는 훅.
import { useLoaderData } from "react-router-dom";
const event = useLoaderData()

event 변수는 load로 가져온 데이터를 useLoaderData() 훅으로 접근할수가 있게됩니다.

Link

import { Link } from 'react-router-dom
```
	`<Link to:'경로' />`
```
router. path 에 지정한 경로를 to 에 넣기.
a href 와의 차이점
- a 태그로 이동하면 이동할때마다 서버에서는 모든 자바스크립트 파일들을 다시 로딩, 리액트 애플리케이션을 재시작함. 배후에서는 이런 불필요한 작업이 일어나게 되고 사이트 성능에도 영향을 미침.
- Link는 기본적인 앵커 요소를 렌더링 하지만, 서버의 http 요청을 전송하는 것을 막아줌.

relative

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

// 상대 경로로 링크를 생성할 때
<Link to=".." relative="path">

위의 코드에서 relative 속성은 Link 컴포넌트를 상대 경로로 설정할 때 사용됩니다.

기본적으로 relative 속성은 라우터 설정으로 만들어진 router 객체를 기본값으로 사용합니다. 이는 부모 경로에 상대적인 경로를 생성할 때 사용됩니다. 예를 들어, 현재 경로가 /products이고 to=".."로 설정하면 부모 경로인 /로 이동하게 됩니다.

또한, relative 속성에 path 값을 설정하면 현재 URL의 경로에서 path로 지정한 세그먼트를 제거하여 생성합니다. 예를 들어, 현재 경로가 /products/shoes이고 relative="path"로 설정하면 상대 경로 /products가 생성됩니다.

상대 경로를 통해 링크를 생성할 때, 현재 URL에 대한 상대적인 위치를 기준으로 링크를 생성할 수 있습니다. 이를 통해 동적인 라우팅에서 편리하게 링크를 구성할 수 있습니다.

NavLink

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

위 Link 와 사용법과 용도는 같습니다. 다만 'NavLink'에는 특수한 동작이 하나 있습니다. 해당 링크로 이동하게 되면(활성화) 클래스를 입힐수 있습니다.
(하이라이트 기능)
'isActive'라는 속성을 통해 커스텀 활성화 로직을 정의할 수 있는 기능을 제공하는데 이 링크가 활성화 되어있다면 isActive 는 true, 아니면 false,
NavLink 에 className 속성에 함수를 받는 프로퍼티를 만들수 있는데 isActive를 이용해 활성화 됬을때 class를 입힐수있습니다.

//비구조화할당으로 매개변수에서 isActive 속성을 추출(react-router-dom에서)
<NavLink to:'/' className={({isActive})=>isActive ? a:b}>link</NavLink>

*모든 라우터는 '/' 로 시작하기 때문에 모든 라우터에 대해 활성화 될수 있습니다. 이럴때는 end 속성으로 현재 url이 이 경로로 끝나야지만 활성으로 간주하게 만들수 있습니다.(end 기본값은 true)

<NavLink to:'/' className={({isActive})=>isActive ? a:b} end>link</NavLink>

useNavigate()

프로그램 적으로 경로를 이동해야 할경우, 위 훅으로 강제적으로 이동시킬수있음,
ex) 일정 시간이 지났을때 해당 페이지로 이동시키기 등등.

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

const navigate = useNavigate();
  function navigateHandler() {
    navigate("/Products");
  }

<button onClick={navigateHandle}>go Products</button>

useNavigation()

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

페이지 이동에 대한 상태를 알수있는 훅.
const navigation = useNavigation()

navigation.state === 'idel' or 'submitting' or 'loading'

idle: 보류 중인 네비게이션이 없습니다.
submitting: POST, PUT, PATCH 또는 DELETE를 사용한 양식 제출로 인해 경로 작업이 호출됩니다.
loading: 다음 경로의 로더가 호출되어 다음 페이지를 렌더링 중입니다.

일반적인 네비게이션 및 GET 양식 제출은 다음과 같은 상태로 전환됩니다:

idle → loading → idle

* 위 네비게이션은 이동한 페이지에 추가 되는게 아니라 전환이 시작되었을때 이미 화면에 표시되어있는, 컴포넌트에 추가됩니다.

useParams()

useParams()는 React Router 라이브러리에서 제공하는 훅 중 하나로, 동적인 라우팅을 구현할 때 사용됩니다. useParams()를 사용하여 경로의 동적인 부분을 추출하고 활용할 수 있습니다.

라우트 설정:

React Router에서 동적인 라우팅을 설정할 때, *역동적 경로 세그먼트 식별자를 사용합니다.

*역동적 경로 세그먼트 식별자(Dynamic Path Segment Identifier)
:역동적 경로 세그먼트 식별자는 동적인 데이터를 경로에 포함하여 동적인 라우팅을 가능하게 해줍니다.
React Router에서 ':' 기호를 사용하여 역동적 경로 세그먼트 식별자를 표시합니다. 예를 들어, "/products/:productId" 에서 :productId가 역동적 경로 세그먼트 식별자입니다. 이 부분은 사용자가 제품 ID를 직접 입력하거나 클릭한 제품에 해당하는 ID를 나타내는 동적 데이터로 대체됩니다.

{
  path: "/products/:productId",
  element: <DetailProducts />,
}

위의 예제에서 /products/:productId 경로는 :productId를 역동적 경로 세그먼트 식별자로 사용하며, 이 부분은 제품 ID와 같은 동적인 데이터를 표현합니다.

useParams() 사용:

useParams()를 통해 동적인 데이터를 컴포넌트 내에서 가져올 수 있습니다.

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

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

  return (
    <div>
      <h1>DetailProducts</h1>
      {/* 동적 데이터를 가져옴 */}
      <p>{params.productId}</p>
    </div>
  );
};

export default DetailProducts;

위의 코드에서 params.productId는 URL에서 추출된 동적인 데이터인 제품 ID를 나타냅니다. 이를 활용하여 해당 제품의 상세 정보를 표시하거나 필요한 작업을 수행할 수 있습니다.

예를 들어, /products/item1과 같은 경로로 접속했을 때, params.productId는 item1이 되어 해당 제품의 ID를 추출할 수 있습니다. 이를 통해 동적인 데이터를 활용하여 사용자에게 맞는 콘텐츠를 렌더링하거나 작업을 처리할 수 있습니다.

최 재성