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