1. 라우팅이란?

웹 페이지를 만들면 여러가지 페이지가 존재할 것 입니다. 이때 존재하는 모든 페이지를 한 번에 띄울 수는 없으니 사용자가 요청한 URL에 알맞는 페이지를 띄워주는 것을 라우팅이라고 합니다.
React-Router는 리액트에서 라우팅 기능을 제공하는 라이브러리입니다.

2. Single Page Application?

리액트는 싱글페이지 웹을 만드는 라이브러리입니다. 그런데 리액트에서 라우팅을 한다??
"다른 페이지를 불러온다는 것 자체가 싱글페이지가 아니지 않은가?" 라는 생각을 하게 됩니다.
여기서 알아야 할 점이 있습니다.
Single Page Application이 아닌 Multi Page Application은 다른 페이지로 이동할 때마다 새로운 html파일을 로드하는 것입니다. 하지만 리액트 라우팅은 다른 페이지로 이동하여도 새로운 html파일을 로드하는 것이 아닌 한가지 html파일만 로드한 후 사용자의 요청에 맞게 필요한 데이터만 업데이트 해주는 방식으로 동작하기 때문에 Single Page Application이라고 할 수 있는 것입니다.

요약하자면, 실제로는 1개의 페이지만 존재하지만, 사용자의 요청에 따라 웹페이지 화면이 업데이트 됨으로써 사용자는 여러 페이지가 있는 것처럼 경험하는 것입니다.**

3. 리액트 라우터 사용하기

npm install react-router-dom

해당 명령어를 터미널에 입력하여 리액트 라우터를 설치해줍니다.

3-1. BrowserRouter

BrowserRouter 태그는 새로고침 없이 페이지 이동을 가능하게 해준다. 리액트 라우팅을 적용할 컴포넌트를 BrowserRouter태그로 감싸주어야 하므로 리액트 프로젝트의 index.js에 BrowserRouter를 import하고 App 컴포넌트를 BrowserRouter 태그로 감싸줍니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

3-2. Routes, Route

이제 준비는 끝났습니다.
App.js에서 Routes와 Route를 import한 후에 Route태그는 Routes태그 안에 넣어주어야 하고
Route태그의 속성은 path값으로 넣은 주소에 element값으로 넣은 컴포넌트를 렌더링합니다.

import './App.css';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home'
import About from './components/About'

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
    </Routes>

  );
}

3-3. Link

유저가 주소 요청은 어떻게 할까요? 주소창에 직접 유저가 입력할 수도 있지만 html의 a태그처럼 리액트 라우터에서는 Link태그가 요소를 감싸서 링크시켜 줄 수 있습니다.
위 코드에서 아이콘을 Link태그로 감싸준 모습입니다. Link 태그에서 to 속성으로 주소를 지정해주게 되면 해당 아이콘을 클릭했을때 to 속성으로 지정한 주소로 요청하게 됩니다.

<Link to="/about"><i class="fa-solid fa-bars fa-2xl" style={{color: "#19191a",}}></i></Link>

이제 아이콘을 클릭하면 Link에 의해서 /about으로 요청하게 되고 Route에 의해서 주소가 /about일때 요소인 About컴포넌트를 렌더링하게 됩니다.

3-4. Outlet

Outlet태그는 다른 컴포넌트로 변할 수있다.

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

export default function Layout() {
    return (
        <>
        <h2>layout</h2>
        <Outlet />
        </>
    )
}

예를 들어서 router가 다음과 같이 설정되어 있다고 해보자.

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./routes/home"
import Profile from "./routes/porfile";

const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout/>,
    children: [
      {
        path:"",
        element: <Home/>
      },
      {
        path: "profile",
        element: <Profile/>
      }
    ]
  }
])
function App() {
  return <>
  <RouterProvider router={router}/>
  </>;
}

export default App

Outlet컴포넌트는 "/"경로로 접근하게 되면 Layout 컴포넌트를 먼저 렌더링한 후에 Layout컴포넌트 안에 있는 Outlet태그에 의해서 Home컴포넌트를 렌더링한다.
"/profile"로 이동하면 Layout컴포넌트를 먼저 렌더링한 후 Profile컴포넌트를 렌더링 하게 되는 것이다.

Outlet은 경로에 따라 컴포넌트가 달라지는 컴포넌트 변수라고 생각할 수 있다.

3-5. useNavigate

위의 Link태그는 html에서 경로를 이동하는 기능이었는데, js 또는 ts문법에서 경로를 이동하려면 useNavigate훅을 사용하면 된다.

사용 예시는 다음과 같다.

import {useNaviagte} from 'react-route-dom'

const navigate = use Navigate();

const yourfunction = () => {
  navigate('이동할 경로')
}

4. React-Router v6 달라진 점

1. 번들의 크기가 많이줄어듬. (대략 70%줄음)
2. Route태그를 감싸는 태그가 Switch태그에서 Routes태그로 변경.
3. Route태그의 속성 render이 element로 변경되고 작성법 또한 JSX로 변경.
4. Redirect 컴포넌트 지원중단, 대신 Navigation 컴포넌트 지원.
5. useHistroy > useNavigation 변경.
6. 중첩 라우팅을 할 때 하위에 있는 라우팅 주소를 중복되는 주소의 처음부터 입력하지않고 추가적인 주소만 : 뒤에 입력할 수 있게됨.
7. 중첩되는 레이아웃은 outlet 속성 사용.