SEB Section 1 SPA

SPA의 등장 배경과 개념

1. 등장배경

• 전통적인 웹사이트는 페이지 이동시 매번 HTML 파일로 된 ‘페이지 전체를’ 불러와야 했다.
• 웹사이트가 복잡해지고, 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어났다.
• 이때 마다 중복된 요소들을 매번 불러오는 것이 불필요한 트래픽 증가, 사용자 경험의 저하를 야기 시켰다.

1. 개념

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

SPA의 장점과 단점

1. 장점

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

1. 단점

• SPA의 경우 JS파일의 크기가 커져, 이 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.
• 검색 엔진 최적화가 좋지 않다. 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.

SPA & Routing

• SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다.
• 기능 별로 페이지를 만들게 되는데, 이 화면에 따라 “주소”도 달라진다.
• 다른 주소에 따라 다른 뷰를 보여주는 과정을 Routing 이라 한다.

React Router 주요 컴포넌트

• import를 하여 필요한 모듈을 불러와야 한다.
• 라우터 역할의 BrowserRouter
• 경로를 매칭해주는 Switch 와 Route
• 경로를 변경하는 Link
• react-router-dom npm을 설치하고, import를 통해 불러와 사용한다.

React Router를 이용한 메신저 App.js

import {
  BrowserRouter,
  Link,
  useHistory,
  Route,
  Switch,
} from "react-router-dom";     </* Route는 react-router-dom 모듈 안에 있음 */>
import Sidebar from "./Sidebar";         </* 컴포넌트를 작성한 JS파일을 import 함 */>
import Tweets from "./Pages/Tweets";
import MyPage from "./Pages/MyPage";
import About from "./Pages/About";
import Navbar from "./Navbar";
import Login from "./Pages/Login";

const App = () => {
  let history = useHistory();    {/* History를 사용하면 페이지의 기록을 알 수 있음 */}

  const goHome = () => {
    history.goBack();    {/* 여러가지 메소드들이 있는데 뒤로가기 이므로, goBack 메소드를 사용한다. */}
  };
  return (
    <div>
      <BrowserRouter>
        {/* BrouwerRouter로 묶어 Route 설정이 가능하도록 설정 */}
        <div className="App">
          <div>
            <button type="button" onClick={goHome}>    {/* 버튼을 누르면 뒤로 갈 수 있도록 설정 */}
              뒤로가기
            </button>
          </div>
          {/* <Navbar /> */}
          <main>
            <Sidebar />
            <section className="features">
              <Switch>
                <Route exact path="/">
                  {/* Route 경로를 설정 */}
                  <Tweets /> {/* 해당 경로에 어떤 컴포넌트를 보여줄지 설정 */}
                </Route>
                <Route path="/about">
                  <About />
                </Route>
                <Route path="/mypage">
                  <MyPage />
                </Route>
                <Route path="/login">
                  <Login />
                </Route>
              </Switch>
            </section>
          </main>
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;  {/* 다른 페이지에서 이 컴포넌트를 쓰겠다는 선언 */}