Chapter1. React SPA

SPA란

SPA(Single Page Application): 서버로부터 완전한 새로운 페이지를 불러오지 않는 대신, 페이지 갱신에 필요한 데이터만을 받아 그 정보를 기준으로 현재 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트

등장배경

• 전통적인 웹사이트는 사용자가 웹사이트 내의 다른 페이지로 이동할 때마다 매번 브라우저가 HTML 파일로 된 "페이지 전체"를 불러오는 방식으로 작동됐음
• Promblem
  • 기술이 발전함에 따라 웹사이트가 복잡해지고, 애플리케이션의 형태를 가지면서 사용자와 서비스 사이에 상호작용이 증가함
  • 매번 Header나 Navigation Bar 등과 같이 중복되는 요소를 불러옴
    → 불필요한 트래픽이 증가
  • 매번 모든 페이지를 불러오기 때문에 반응성이 느림
    → 사용자 경험 저하

특징

장점

• 사용자와 빠른 상호작용 → 더 나은 UX
  • 전체 페이지가 아니라 필요한 데이터만 받아서 화면에 업데이트 함
• 서버 과부하 문제 감소
  • 서버는 요청 받은 데이터만 넘겨주면 됨

단점

• 첫 화면의 로딩 시간이 긺
  • 첫 화면 로딩 시 읽는 HTML 파일은 거의 비어 있고, 대부분의 코드가 JS 파일에 있기 때문에 JS 파일 크기가 큼
    → JS 파일을 기다려야함
• 검색 엔진 최적화(SEO)에 불리
  • 대부분의 검색 엔진은 HTML파일에 있는 자료를 분석하는 방식으로 구동됨
    → HTML파일에 별다른 자료가 없음
• 개발의 복잡도가 증가
  • 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리 필요함

---

Chapter2. React Router

개념

라우팅(Routing)

네트워크에서 경로를 선택하는 프로세스 → 주소에 따라 다른 화면을 보여주는 과정

React Router

라우팅을 위한 React 라이브러리

React Router의 주요 컴포넌트

router

• 라우터의 역할을 함

BrowserRouter

• <BrowserRouter> : 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줌
• React Router의 컴포넌트들을 사용하기 위해서 <BrowserRouter>는 반드시 상위에 작성되어 있어야 함
• ReactDOM의 렌더 단계인 index.js에 <BrowserRouter>를 넣어서 활용할 수도 있음

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

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

route machers

• 경로를 매칭하는 역할

Routes

• <Routes>: 여러 <Route> 컴포넌트를 자식요소로 삼고, 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜줌
  • ⚠️ <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링함
    → 반드시 Routes 컴포넌트로 Route 컴포넌트들을 감싸기

Route

• <Route>
  • path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정함
  • <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
  • path=”*” :지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여줌

route changer

• 경로를 변경함

Link

• <Link>: 경로를 연결해 주는 역할을 하는 컴포넌트
  • 페이지 전환을 통해 페이지를 새로 불러오지 않고, 애플리케이션을 그대로 유지한 채 HTML5 History API를 이용해 페이지의 주소만 변경함
  • ReactDOM으로 렌더링 되면 <Link> 컴포넌트가 <a> 요소로 바뀜
  • <Link> 의 to 속성을 활용해 <Route> 컴포넌트에 설정해 준 path 주소를 연결함

참고사항
React Router에서 <a>가 아닌 <Link>를 사용하는 이유

• <a>요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킴(새로고침)
• <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있어 SPA를 구현함

예시 코드

//React Router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";

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;