[React] 리액트 SPA

키워드 : MPA, SPA, Routing, Router, Browser Router, Route(s), Link

---

SPA(Single Page Application)

 

특징

• 페이지 전환 시 중복되는 부분(메뉴, footer... 등)은 새로 불러오지 않는 웹페이지 표시 실행 방식.
• 완전히 새로운 페이지를 불러오는 것이 아닌 화면 update에 필요한 데이터만 서버에서 전달받아 업데이트하는 방식으로 작동하는 Web App or site를 일컬음.

전통적인 방식	SPA 방식
느린 반응성	빠른 반응성
페이지 이동 시, HTML 파일로 된 '페이지 전체'가 로딩	update 필요한 '부분'만 서버에서 전달받아 로딩
불필요한 트래픽 발생	불필요한 트래픽 발생 X
과부하 위험 높음	과부하 위험 낮음

 

단점

1. JS 파일 크기가 큼
   • 첫 화면 로딩 시, JS 파일을 받아오는 시간이 커서 로딩 시간이 길다.
2. 검색 엔진 최적화에 좋지 않음.
   • 검색 엔진은 대개 HTML 파일에 있는 자료를 분석하는 방식으로 구동되는데, SPA 형식의 경우 HTML 파일에 별다른 자료가 없어 적절히 동작하지 못한다.

 

---

React Router

 

Routing

• 주소에 따라 달라지는 각각의 모습을 보여주는 '과정'을 '경로에 따라 변경한다는 의미로 Routing이라 일컬음.
• 리액트 자체에는 내장되어 있지 않아 'React Router'라는 라이브러리를 이용.

 

React Router의 주요 컴포넌트

• BrowserRouter
  • 라우터 역할 (router). 상위에 있어야함.
• Routes / Route
  • 경로 매칭 (route matchers)
  • path 속성으로 경로 연결
• Link
  • 경로 변경 (route changers)

 

컴포넌트 호출 명령어

import {BrowserRouter, Routes, Route, Link} from "react-router-do"

• 구조분해할당 방식으로 필요한 컴포넌트를 불러옴. 최상단에 작성.

 

예시 코드 (출처 : 코드스테이츠)

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;