[SEB_FE_44] React(2) - React SPA

오늘 배운 주제

---

• React SPA
• React Twittler SPA

오늘 배운 내용

---

• SPA

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

• 장점

1. 전체페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응합니다.
2. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어듭니다.
3. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공합니다.

• 단점

1. JavaScript 파일의 크기가 크기 때문에 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어집니다.
2. 검색 엔젠 최적화가 좋지 않습니다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동합니다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못합니다.

• BrowserRouter

BrowserRouter 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다.

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>
);

• Routes, Route

경로를 매칭해주는 역할을 하는 컴포넌트입니다.

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

• Link

경로를 연결해 주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다.

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

오늘의 과제

---

React Twittler SPA

• App.js

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              <Routes>
                <Route path="/" element={<Tweets />} /> 
                <Route path="/mypage" element={<MyPage />} /> 
                <Route path="/about" element={<About />} />
              </Routes>
            </section>
          </main>
        </div>
      </BrowserRouter>
    </div>
  );
};

과제가 어려울까 조금 걱정을 했었는데 간단하게 Route를 쓰면 해결되는 과제였다. 덕분에 내 페어한테도 설명해줄 시간이 많았고, 과제도 빠르게 해결함

내일은 state랑 props 과제가 있다. 반년 전에 공부한 내용이라 다 까먹은 상태라서 문제가 조금 쉬웠으면 좋겠다. 내일 과제는 월요일까지다.