React _ React SPA

1. React SPA ?

전통적 웹사이트 (Multi Page Application): 웹사이트 내의 다른 페이지로 이동할 때 페이지 보여주기 위해서 매번 HTML 파일로 된 '페이지 전제'를 불러옴

SPA (Single Page Application): 웹사이트 내의 다른 페이지로 이동할 때 menu나 Footer과 같은 페이지 전환 이후 중복되는 부분은 새로 불러오지 않음

전통적 웹사이트의 경우 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰다.
이는 사용자 입장에서도 더 느린 반응성을 가져오기 때문에 좋은 사용자 경험을 제공하기가 어려웠다.

이를 해결하기 위해서 SPA가 개발되었다.SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다. SPA 방식으로 개발된 대표적 사이트에는 유튜브, 페이스북, 넷플릭스 등이 있다.

2. SPA의 장단점

SPA의 장점

• 애플리케이션과 사용자 사이에서 수시로 상호작용이 발생할 때 필요한 부분만 업데이트해주기 때문에 사용자 행동에 빠르게 반응한다.
  (EX) SNS에서 친구가 올린 사진에 좋아요 누리고 댓글 달 때)

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

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

SPA의 단점

• 첫 화면 로딩 시간이 길다
  브라우저는 첫 화면 로딩 시 HTML 파일을 읽어들인 후 JS 파일을 다시 받아오는 과정을 거치는데 대부분의 코드가 JS 파일에 들어있어 JS 파일을 기다리는 시간으로 인해 첫 화면 로딩이 길어진다.

• 또 검색 엔진 최적화가 좋지 않다.
  검색 엔진 최적화란 구글이나 네이버같은 검색엔진이 자료를 수집하기 좋도록 웹페이지를 구성하는 것을 뜻한다. 검색 엔진은 검색 로봇이 웹 페이지에 있는 정보를 수집, 분석해서 작동하는데 SPA의 경우 HTML이 거의 비어있다 보니 검색 로봇이 충분히 자료를 수집하지 못한다.

3. Wireframe

와이어프레임 => 디자인 들어가지 전 단계로 선을 이용해 윤곽선을 잡는 것을 말한다.
이 작업을 통해서 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있다.

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

4. React Router

라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로를 따라 변경한다"라는 의미로 '라우팅'이라고 한다. 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 React Router 라이브러리를 사용해야 한다.

React Router에는 4가지의 컴포넌트가 있다

• < BrowserRouter >
  => 라우터 역할
  
  
• < Routes > , < Route >
  => 경로 매칭 역할
  
  
• < Link >
  => 경로 변경하는 역할, < a > 태그처럼 페이지를 전환시키는 역할을 한다. < a > 태그를 사용하지 않는 이유는 새로고침을 방지하고 원하는 부분만 업데이트하기 위해서이다.

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 한다. 다음과 같은 코드를 사용한다.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
//react-router-dom(일종의 객체)에 굉장히 많은 컴포넌트 저장되어 있어서 매우 무거워 우리가 원하는 것만 뽑아오겠다는 뜻이다 -> 구조분해할당

5. react-twittler-spa

// TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요.
import Sidebar from "./Sidebar";
import Tweets from "./Pages/Tweets";
import MyPage from "./Pages/MyPage";
import About from "./Pages/About";
// import (-> 가져오다) from (Pages 폴더 안에 있는 MyPage.js, About.js 에서)

const App = () => {
  return (
    <BrowserRouter>
    // <BrowserRouter> 컴포넌트는 최상위에 위치
      <div>
        {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              {/* TODO - Routes와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
              <Routes>
                // <Routes> 컴포넌트는 <Route> 컴포넌트를 감싼다.
                // 리액트는 "/" 와 "/" 뒤에 내용이 붙어있는 것(ex)"/About")을 구분을 못하기 때문에 <Routes> 컴포넌트로 감싸준다.
                <Route path="/" element={<Tweets />} />
                <Route path="/about" element={<About />} />
                <Route path="/mypage" element={<MyPage />} />
              </Routes>
              <Tweets />
            </section>
          </main>
        </div>
      </div>
    </BrowserRouter>
  );
};

const Sidebar = () => {
  return (
    <section className="sidebar">
      {/* TODO : About 메뉴 아이콘과 Mypage 메뉴 아이콘을 작성하고 Link 컴포넌트를 이용하여 경로(path)를 연결합니다. */}
      <Link to="/">
        // Link to 로 가져오는 주소는 우리가 Route로 지정한 주소와 무조건 같아야 한다. 
        <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>
  );
};