S2) Unit 5. [React] React SPA

📣 SPA 란?

✔️ 등장배경 

➰ 전통적인 웹사이트 : 사용자가 웹사이트 내의 다른 페이지로 이동하면, 매번 HTML 파일로 된 페이지 '전체'를 불러와야 했다.

➰ 이때마다 header, navigation bar 등 중복되는 요소들을 매번 불러오는 것은 서어와의 불필요한 트래픽을 발생 시켰다.

➰ 사용자 입장에서는 느린 반응성을 갖게 되었다.

 

✔️ SPA?

➰ Single Page Application

➰ 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트

 

✔️ 장점

➰ 부분 데이터만 받아서 화면을 업데이트 하기 때문에 사용자의 행동에 빠르게 반응한다.

➰ 서버에서는 요청받은 데이터만 넘겨주기 때문에 서버 과부하 문제가 줄어든다.

➰ 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 사용자 경험을 제공한다.

 

✔️ 단점

➰ JS 파일의 크기가 크기 때문에 이 JS 파일을 기다리는 시간으로 인해 첫 로딩 시간이 길다.

➰ 검색 로봇은 자료를 수집할 때 HTML 자료를 분석하는 방식으로 검색 기능을 구동하기 때문에 HTML 파일에 별다른 자료가 없는 SPA의 경우 검색 엔진 최적화가 좋지 못하다.

 

📣  Wireframe

✔️ Wireframe vs Mockup

Wireframe	Mockup
웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대(디자인X)	데모 시연, 평가를 위한 최소한의 기능만 담은 모형(디자인O)

 

✔️ React를 이용한 설계

➰ 어떤 컴포넌트를 만들고, 이들을 조합할지 계획하는게 우선

➰ 컴포넌트들끼리 보다 유기적으로 데이터를 주고받을 수 있도록 설계해야 한다.

 

 

📣  React Router

✔️ React Router란?

➰ SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하는 건 아니다.
➰ 화면에 따라 주소가 달라지는 것 
➰ 다른 주소에 따라 다른 뷰를 보여주는 과정 : Routing
➰ 리액트에 기능이 내장되어 있지 않아서 React Router라는 라이브러리 사용

 

✔️ React Router 활용

➰ 주요 컴포넌트

1️⃣ BrowserRouter : 라우터 역할

2️⃣ Routes, Route : 경로를 매칭

3️⃣ Link : 경로를 변경

 

➰ 라이브러리 설치

npm install react-router-dom@^6.3.0

 

➰ 불러오기

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

 

📣  React Router 실습

✔️ <BrowserRouter> : 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.

➰ BrowserRouter가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

 

✔️ <Routes> : 여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜준다.

➰ <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

 

✔️ <Route> : path속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄지 정한다.

➰ <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

 

🚨 사용자가 지정된 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있다.

     이럴 때, path="*" 를 지정해주면 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여준다.

 

✔️ <Link> : 경로를 연결해 주는 역할을 한다.

➰ 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 페이지의 주소만 변경해 준다.

➰ ReactDOM으로 렌더를 시키면 <Link> 가 <a> 요소로 바뀌는 모습을 볼 수 있다.

➰ <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킨다 -> 새로고침

➰ 하지만 <Link> 컴포넌트는 이를 방지하는 기능이 내장되어 있기 떄문에 <a> 대신 사용한다.

 

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
            <Link to="/">Home</Link>
            </li>
            <li>
            <Link to="/mypage">MyPage</Link>
            </li>
            <li>
            <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        {/* 주소 경로와 아까 만든 3개의 컴포넌트를 연결해 줍니다. */}
       {/* Routes 컴포넌트는 Route 컴포넌트들을 감싸고 있어야 합니다. */}
       <Routes>
          {/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;