[React] SPA와 라우팅

1. SPA(Single Page Application) 이란?

하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 (모바일 앱 같은 경험을 느낌)

여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용한다.

자바스크립트만을 활용해 전체 페이지를 만들기때문에 첫 요청 시 빈페이지를 받게 된다.

 

2. SPA 단점

HTML은 비어있기 때문에 첫 화면 로딩시간은 다소 길 수 있으며,

하나의 자바스크립트 앱을 전송 받기때문에 코드가 많아질수록 로드 속도가 느려진다.

MPA방식보다 검색엔진 최적화(Search Engine Optimization)에 불리하다.

 

🔎 MPA(Multi Page Application)

서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달
페이지 이동할 때 마다 html을 받아오고, 로딩 시 CSS, JS 등의 파일등의 리소스를 전달 받아 화면에 보여준다.

 

3. react-router

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것을 말한다.

리액트에선 주로 react-router 라이브러리를 활용하여 라우팅을 쉽게 할 수 있다.

적용 시, 서버의 모든 path에서 같은 앱을 서빙하도록 해야한다.

 

4. react-router 기능

컴포넌트를 특정 path와 연결하면 해당하는 path로 진입 시 컴포넌트를 랜더링 한다.

query, path variable 등 URL parameter를 얻어서 활용한다.

조건에 맞지 않으면 redirect 한다.

 

5. react-router 사용

BrowserRouter: 컴포넌트 최상위에 감싸서 Router Context를 제공해야한다.

Route: path를 정의하고, 그 안에 랜더링하고자 하는 컴포넌트를 넣는다.

Link: 특정 페이지로 이동 시 리로드 없이 페이지가 이동한다.

Routes: 매칭되는 라우트 하나를 랜더링하게 한다. (Switch에서 Routes로 바뀜)

 

npm i react-router-dom

라이브러리 설치 후 package.json에 들어가있는지 확인하기!

 

// App.js

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Route path="/about" element={<AboutPage />} />
        </Route>
        <Route path="/">
          <Route path="/contact" element={<ContactPage />} />
        </Route>
        <Route path="/">
          <Route path="/" element={<HomePage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

라이브러리를 사용하기 위해 react-router-dom 에 내장되어 있는 각 컴포넌트를 불러온다.

<BrowserRouter>를 컴포넌트 최상위에 감싸고 <Routes> 컴포넌트 안에 <Route>를 작성한다.

 

// HomePage.jsx

import React from 'react'
import { NavLink } from 'react-router-dom'

const HomePage = () => {
  return (
    <div>
      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>
      <div>Home 페이지</div>
    </div>
  )
}

export default HomePage

 

만약 에러가 난다면 react-router-dom v6를 사용하고 있는지 꼭 확인하기!!!