[React]리액트 라우터 React-Router

[ MPA와 SPA ]

 

★ MPA 

 

 MPA는 Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며 SSR(Server Side Rendering)방식으로 렌더링합니다. 

 

 MPA는 서버에 새로운 페이지를 요청할 때마다, 신규 페이지를 불러와 페이지 리소스가 다운로드 되어 그에 맞춰 전체 페이지를 다시 렌더링하게 됩니다. 

 

장점	단점
- 크롤링하기에 적합하다. (SEO 관점에서 유리) - 서버에서 이미 렌더링해 가져오기 때문에 첫 로딩 시간이 짧다.	- 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링한다. (깜빡임 현상) - UI를 개발할 때 반복적인 코드를 삽입해야 한다.  - 한 번 수정할 때는 페이지 전체를 수정해야하기 때문에 유지보수에 어려움이 있다.

 

 

★ SPA 

 

 SPA는 Single Page Application으로 페이지가 한 개인 웹 어플리케이션을 의미하며, CSR(Client Side Rendering)방식으로 렌더링합니다. 

 

 SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 데이터만을 넘겨주어, 첫 요청시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용합니다. 

 

장점	단점
- 자연스러운 UX - 필요한 리소스만 부분적으로 로딩하여 성능에 좋다.  - UI 개발을 빠르게 할 수 있다. - 해당 부분만 수정이 가능하여 유지보수에 좋다.  - 컴포넌트별로 코딩을 하기 때문에 코드 재사용성이 좋다.	- 초기 로딩 시간이 비교적 느리다.  - 검색엔진최적화(SEO)가 어렵다.  - CSR 방식은 클라이언트측에서 사용자에 대한 정보를 저장하기에 보안 이슈가 있을 수 있다.

 

 

 

 

[ React-Router ]

 

 리액트는 SPA 방식으로 구성되어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만을 가져오는 형태를 가집니다. 

 

 React-Router는 페이지를 새로 불러오지 않는 상황에서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리입니다. 

 

 먼저, 다음 명령어를 입력하여 라이브러리를 설치합니다. 

 

// for npm
$ npm install react-router-dom@6

// for yarn
$ yarn add react-router-dom@6

 

 다음으로 src/index.js 로 이동하여 BrowserRouter를 임포트 한 뒤, <App/> 컴퍼넌트를 BrowserRouter 컴퍼넌트로 감싸줍니다. 

 

 <BrowserRouter> 는 React-Route를 시작하는 컴포넌트로, <Route> 컴포넌트는 반드시 <BrowserRouter> 내부에 있어야 합니다. 

 

// src/index.js
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';    // new!

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

reportWebVitals();

 

 

 

[ Route 사용법 ]

 

 <Route>는 path prop을 통해 매칭시킬 경로를 지정하고 element prop을 통해 매치되었을 때 보여줄 컴포넌트를 할당하여, 현재 주소창의 경로와 매치될 경우 해당 컴포넌트를 보여주게 됩니다. 

 

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

<Route path="경로" element={보여 줄 컴포넌트}></Route>

 

<예제>

// src/Home.jsx
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home !!!</h1>
    </div>
  );
};

export default Home;

// src/Login.jsx
import React from 'react';

const Login = () => {
  return (
    <div>
      <h1>Login !!!</h1>
    </div>
  );
};

export default Login;

// src/App.jsx
import { Routes, Route } from "react-router-dom";
import Home from './Home';
import Login from './Login';

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/login' element={<Login />} />
    </Routes>
  );
}

export default App;

 

 

 

 

[ Link 사용법 ]

 

 <Link>는 html의 <a> 태그와 유사한 기능을 하지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다. 

 

 브라우저에서 클릭이 가능한 '내용'을 클릭하게 되면 주소창의 경로는 to props에서 지정한 경로로 갱신됩니다. <도메인경로>/경로

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

<Link to="경로">내용</Link>

 

// src/App.jsx
import { Routes, Route, Link } from "react-router-dom";
import Home from './Home';
import Login from './Login';

function App() {
  return (
    <>
      <ul>
        <li><Link to='/home'>Home</Link></li>
        <li><Link to='/login'>Login</Link></li>
      </ul>
      <hr />
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/login' element={<Login />} />
      </Routes>
    </>
  );
}

export default App;

 

 

 

 

[ 라우트 중첩 - Outlet ]

 

 <Route> 로 다른 Route들을 감싸는 것을 라우트의 중첩이라고 합니다. 

 

 이때, 하위 Route 들의 내용이 보이도록 하기 위에선 상위 Route의 컴퍼넌트에 <Outlet />을 추가해야합니다. 

 

 <Outlet />을 통해서 상위 컴포넌트를 레이아웃화 할 수 있는 것이죠! 

 

 <Outlet />이 작성된 위치에 하위 컴포넌트들이 위치하게 됩니다. 

 

// src/Menu.jsx
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Menu = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/home">Home</Link>
        </li>
        <li>
          <Link to="/login">Login</Link>
        </li>
      </ul>
      <Outlet />    //이 위치에 <Home />과 <Login />이 위치하게 됨
    </>
  );
};

export default Menu;

 

// src/App.jsx
import { Routes, Route, Link } from "react-router-dom";
import Home from './Home';
import Login from './Login';
import Menu from './Menu';

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Menu />}>
          <Route path='/home' element={<Home />} />
          <Route path='/login' element={<Login />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;