🚦 React Router

🌱 React Router

• React 어플리케이션에서 클라이언트 측 라우팅을 구현하는데 사용되는 라이브러리
• SPA( Single Page Application, 단일 페이지 어플리케이션 )를 개발할 때, 사용자가 다양한 URL로 이동하거나 페이지를 변경할 수 있도록 도와주는 라이브러리
• 경로 이동시에도 처음부터 다시 로드하지 않고 해당 컴포넌트만 리렌더링

✔️ React Router의 주요 기능

• 컴포넌트 기반: 경로를 이동할 때 마다 컴포넌트를 업데이트 렌더링

• URL 감시: 현재 URL을 확인하고, URL이 변경될 때 마다 라우팅 처리

• 매칭과 렌더링: 현재 URL을 등록된 경로와 비교하여 일치하는 경로의 컴포넌트를 렌더링

• 중첩 라우팅: 중첩된 라우트를 지원하여 복잡한 애플리케이션 구조를 보다 쉽게 처리

• 리다이렉션과 404처리: 컴포넌트를 사용하여 리다이렉션을 처리하고 없는 경로로 접근할 때 404 페이지 표시

• 브라우저 history 관리: 브라우저의 history를 관리하여 뒤로가기와 앞으로 가기를 지원하고 브라우저의 주소 히스토리를 변경하지 않으면서 URL 업데이트

• Hooks 사용: useHistory, useLocation, useParams, useRouteMatch 등 의 훅을 사용하여 더 쉽게 URL을 관리하고 라우팅을 쉽게 함

✔️ React Router( createBrowserRouter ) 설치하기

🌱 기존의 BrowserRouter 방식에서 createBrowserRouter 방식으로 변경됨 !

React Router 설치

npm install react-router-dom@latest / yarn add react-router-dom@latest

• 버전 확인 방법

  • package.json 파일 확인
  • npm: npm show react-router-dom version
  • yarn: yarn info react-router-dom version

• 이전 버전 제거하기

  • npm: npm uninstall react-router-dom
  • yarn: yarn remove react-router-dom

---

✔️ Router.js

🌱 각 path에 맞는 element를 매칭하여 내보내는 역할

• createBrowserRouter를 react-router-dom 에서 import
• 각 페이지에서 보여줄 path와 element / 중첩 라우팅을 위한 children
• 배열 안에 담긴 객체 형태로 담아서 export
• 가장 상단의 페이지가 부모, children으로 들어오는 페이지가 자식 페이지
  부모 → 자식: path가 이어진다( ex: 부모: /products , 자식: /products/detail... )
• children 을 통해 중첩 라우팅
• main page는 index: true 나 path: '' 로 지정

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

// 전체 컴포넌트의 root가 될 최상위 컴포넌트 import
import Root from './routes/root';

// 라우팅 하고 싶은 각각의 페이지 모두 import
import App from './App'; // App.js 나 Root.js 
import NotFound from './pages/NotFound';
import Main from './pages/Main/Main';
import Products from './pages/Products/Products';
import Detail from './pages/Detail/Detail';

export const Router = createBrowserRouter([
	{
		path: '/',
		element: <App />,
		errorElement: <NotFound />,
		children: [
			{
				index: true,
				element: <Main />,
			},
			{
				path: 'products',
				element: <Products />
			},
			{
				path: 'products/:productId',
				element: <Detail />
			},			
		],
	},
]);

---

✔️ index.js

🌱 어떤 것을 렌더링하여 돔에 그릴지 작성

• src 에 index.js 생성
• React, ReactDom 각각 import
• RouteProvider를 react-router-dom에서 import
• Router를 Router.js에서 import
• ReactDOM.createRoot(...).render를 통해 Router를 provider안에 넣는다.

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { Router } from "./Router";

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={Router} />
);

---

✔️ App.js

🌱 **전체적인 레이아웃**을 나타내는 페이지

• src 에 App.js( Root.js 도 됨 ) 생성
• Outlet을 react-router-dom에서 import
• 화면에 항상 렌더링 되어야하지만 페이지 전환이 필요하지 않는 것을 이 페이지에 import
  • 라우팅과 상관없이 항상 화면에 뜨는 고정적인 컴포넌트들 !
  • ex) Nav.js, Footer.js …

import { Outlet } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import Footer from './components/Footer/Footer';
import './App.css';

const App = () => {
	return (
		<div className = 'App'>
			<Nav /> // 고정
			<Outlet /> // URL따라 변경되는 부분
			<Footer /> // 고정
		</ div>
	);
}

export default App;