React Router

1. React Router를 왜 사용하는가?

/home, /login와 같이 URL이 변경되면 보이는 컨텐츠의 내용도 변하게 된다. 새 컨텐츠를 가져오기 위해 새로운 HTTP 요청을 전송하고 응답을 받아야한다.

이 과정 중에 지연이 발생할 수 있고, UI를 저하시킨다.

하지만 리액트 라우터를 사용하면, 페이지 변화가 발생할때 새로운 HTML파일을 fetching하지 않기 때문에 클라이언트 사이드에서 페이지 변화를 처리할 수 있다.

즉, SPA에 멀티 페이지 느낌을 준다.

2. React Router 설치하기

$ yarn add react-router-dom

위의 패키지가 URL 변경을 감지하고, 다양한 콘텐츠를 로딩할 수 있게 한다.

3. React Router 사용하기

1. 라우트 정의

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

const router = createBrowserRouter([
  {},
  {},
]);

createBrowserRouter의 매개변수의 배열의 모든 객체들은 하나의 라우트를 나타낸다.

객체에 프로퍼티를 추가해 라우터의 특징을 정의해주자.

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

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

• path : 라우트가 작동해야할 경로를 정의한다. (도메인 뒷부분)
• element : 라우트가 활성화되면 로딩되어야할 컴포넌트에 대해서 정의한다.

src에 pages 폴더를 만들고 Homepage.jsx 파일을 다음과 같이 만든다.

import React from 'react';

export default function HomePage() {
  return (
    <h1>
      HomePage!!
    </h1>
  );
}

2. 정의한 라우트 사용하기

React에게 router를 사용한다고 알리기 위해 RouterProvider를 사용한다.

먼저 생성한 createBrowserRouter의 값을 RouterProvider의 router 프로퍼티에 넣어준다.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePage from './pages/HomePage';

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

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

export default App;

3. 라우트 추가하기

import './App.css';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePage from './pages/HomePage';
import Products from './pages/Products';

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

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

export default App;

page 폴더에 ProductsPage.jsx를 추가한다.

import React from 'react';

export default function ProductsPage() {
  return (
    <div>
      This is products page!!
    </div>
  );
}

만약 등록되지 않는 라우트를 입력하면 아래와 같은 페이지가 로드된다!