흰색기린

쓰는 이유?

1. 페이지 전환을 쉽게 만들 수 있게 도와줌

2. 페이지 새로고침 않고도 화면 이동

BrowserRouter

 - 애플리케이션 감싸는 최상위 컴포넌트

 - html 히스토리 사용해서 URL 관리함

설치방법

npm install react-router-dom

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrwoserRouter } from "react-router-dom"; // react-router-dom 적용 시 추가

ReactDOM.createRoot(document.getElementById('root')).render(
    <BrwoserRouter> // 추가
        <App />
    </BrwoserRouter> // 추가
);

리액트앱에 모든 앱들이 BrowserRouter안에 있

게 된다.

import { Routes , Route } from "react-router-dom";

function App() {
  return <Routes />;
}

Routers 안에 여러 Router를 정의하여 URL 경로별로 렌더링할 컴포넌트 지정 가능

import NotFound from "./pages/NotFound";

function App() {
  return <Routes>
    <Route path="/" element={<1 />} />
    <Route path="/2" element={<2 />} />
    <Route path="/3" element={<3 />} />
    <Route path="*" element={<NotFound />}/>
  </Routes>;
}

Route path에 "*"를 설정하면 3개 안탈경우 해당 페이지 타게 설정된 것

Link컴포넌트 이용해서 다른 방법으로도 표현할 수 있음

import { Routes , Route , Link } from "react-router-dom";

<Link to={"/"}>Home</Link>
<Link to={"/1"}>1</Link>
<Link to={"/2"}>2</Link>
<Link to={"/*"}>NotFound</Link>

마찬가지로 링크 컴포넌트 이용해서 이동할 수 있다.

a태그를 이용하면 번들패키지로 전부 렌더링 되어 있는 MPA 방식으로 동작할 수 있음 SPA 원칙이 깨질 수 있다.

SPA vs MPA

 - SPA 단일 페이지 동작 , 클라이언트 측에서 페이지 전환함 (전부 가져오고 그 다음 누르면 그 부분만 보여주는 것)

 - MPA는 페이지가 독립적이여서 깜빡깜빡거림 자연스럽지가 않고 원할때 그 부분만 새로 로드하는 방식