Section2 Unit5 [React] React SPA

이미지 출처: https://www.techuz.com/blog/single-page-applications-vs-multiple-page-applications-do-you-really-need-an-spa/

---

Section2 Unit5 [React] React SPA

 

📌 Chapter1. React SPA

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

 

• SPA의 장점

  1. 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다.

  2. 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있다.

  3. 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다.

 

• SPA의 단점

  1. 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 문서 내 <script> 요소의 JavaScript 파일을 다시 받아오는 과정을 거친다. 이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워진다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.

  2. 검색 엔진 최적화(SEO)가 좋지 않다. 검색엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 뜻한다. 검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석한다. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.

 

 

📌 Chapter2. React Router

• 웹 어플리케이션에서의 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다.

• 리액트 라우터를 사용하면 손쉽게 싱글 페이지 애플리케이션 (Single Page Application)을 만들 수 있다.

router	<BrowserRouter>
route matchers	<Routes> <Route>
route changers	<Link>

• 리액트 라우터에는 더 많은 기능들이 있지만, 우선은 간단하게 사용법 정도만 배웠다. <BrowserRouter>로 컴포넌트를 감싸주고, <Routes>와 <Route>와 <Link>를 활용해 경로를 지정하고, 이동시킬 수 있다. 

 

 

↓ 여기 정말 자료도 충분하고 설명도 잘 되어있어서 참고하면 좋을 것 같다 👍🏻

React Router v6 튜토리얼

 

⭐️ 과제. React Twittler SPA

 전날의 React Twittler Intro에 이어서 이번에는 React Route Dom을 활용해 페이지 이동을 구현했다.

 React Route Dom을 활용한 예제만 잠깐 기록해보자면, 아래와 같다.  

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

const App = () => {
  return (
    <BrowserRouter>
      {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
      <main>
        <Sidebar />
        <section>
          {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
          <Routes>
            <Route path="/" element={<Tweets />}></Route>
            <Route path="/about" element={<About />}></Route>
            <Route path="/mypage" element={<MyPage />}></Route>
          </Routes>
        </section>
      </main>
    </BrowserRouter>
  );
};

import { Link } from 'react-router-dom';

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : About 메뉴 아이콘과 Mypage 메뉴 아이콘을 작성하고 Link 컴포넌트를 이용하여 경로(path)를 연결합니다. */}
        <Link to="/"><i className="far fa-comment-dots"></i></Link>
        <Link to="/about"><i className="far fa-question-circle"></i></Link>
        <Link to="/mypage"><i className="far fa-user"></i></Link>
    </section>
  );
};

 아직 익숙치 않아서 그런지 <Route>로 path를 지정하는 것과 <Link>로 경로를 표시하는게 좀 헷갈렸는데, 이번 과제를 통해 좀 더 익숙해진 것 같다. 왜 난 저게 그렇게 헷갈리지?

 

 

🌱 오후 Q&A 세션

• (웹팩 번들링 이후) 리액트는 어떻게 시작되는가?

1. 번들링을 하게 되면 우리가 아는 평범한 js 파일이 생성

2. 생성된 js파일을 html 파일에 <script src=””> 이런식으로 상ㅂ입

3. html 파일은 node.js를 통해 serving(실행)함

4. 그 이후에는 일반적으로 js 실행 로직과 완전히 동일

 

• <BrowserRouter>의 위치

 어디에 사용하든 상관없지만, 반드시 한번만 써야한다.

 강사님은 App 컴포넌트 내에 작성하는 것을 선호 (index.js는 최대한 깔끔한 것을 선호해서)

function App() {
  return <BrowserRouter>{/* ... */}</BrowserRouter>
}

 이 부분 궁금했었는데, 간략하게 설명을 들을 수 있어서 배울 수 있었다. 

 

SPA는 첫화면 로딩이 길다는 단점이 있는데, 그걸 보완하는 방법으로는

1. SSR으로 해결 → CSR에 비해 초기 페이지 로드 시간이 빠르다. 

2. 번들링 시 용량 최적화 하는 방법 → 오픈소스를 되도록 많이 사용하지 않는 방법으로 귀결됨

3. 다이나믹 import(동적으로 가져오기)를 사용 → 불필요한 리소스를 줄일 수 있다. 

 

---

🌙  오늘의 회고

 코드스테이츠 커리큘럼상 React를 어제 시작했는데, state와 prop 등의 중요한 개념을 다루기 전에 React Router Dom을 다루는 부분에 먼저 들어왔다. 드디어 본격적으로 화면에 보이는 작업을 하니 이전보다 더 재미있는게 느껴졌다. 리액트, 언제쯤 자유자재로 다룰 수 있게 될까.

 주말동안 지금까지 못했던 부분들을 복습하고, 재정비를 하는 시간을 가져야겠다.