[React] SPA, Router

SPA

Single-page application

• SPA (Single-Page Application) 개념을 이해하고 설명할 수 있다.
• SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다.

전체를 새로 렌더 vs 부분만 렌더

전통적인 웹사이트는 사용자가 웹 사이트 내의 다른 페이지로 이동하면, 브라우저는 해당 페이지의 html 파일을 서버로부터 불러와 화면에 render 한다 (그린다). 새롭게 그리는 것을 "깜빡인다" 라고도 한다. 이때 중복되는 요소들 (메뉴, 푸터 등) 도 다시 렌더링하게 된다.

웹사이트가 복잡해지고 웹 어플리케이션의 형태를 띄게 되면서, 사용자와 서비스 사이의 상호작용이 증가했다. 새로운 페이지를 불러올 때마다 페이지 전체를 렌더링하는 것은 서버 트래픽을 증가시켰고, 느렸다.
따라서 이러한 필요에 따라 1990년대 후반부터 페이지 전체를 새로 그리는 대신, 페이지 갱신에 필요한 정보만 서버에서 전달받아 JavaScript로 html 요소를 생성해서 화면에 보여주는 방식이 사용되기 시작했고, 2000년대 중반부터는 이러한 방식이 보편화되었다.

SPA (Single Page Application) 는 화면에서 업데이트가 필요한 부분의 데이터만 서버에서 전달받아 브라우저에서 해당 부분만 업데이트하는 방식으로 작동하는 어플리케이션을 말한다. 페이지 하나에서 모든 기능이 이루어지므로 Single Page 이다.
Facebook, Youtube, Netflix 등

SPA 의 단점
1. 첫 화면 로딩 시간이 길다.
SPA의 코드는 대부분 JS 파일에 들어있기 때문에 JS 파일이 무거워서, 처음 로딩시 일반 웹페이지에 비해 오래 걸린다.
2. 검색 엔진 최적화 (SEO, Serach Engine Optimization) 가 좋지 않다.
검색엔진은 HTML 을 탐색하지만 SPA 는 HTML 은 비어 있고 JS 파일 안에 내용이 들어 있기 때문이다. 하지만 검색 엔진의 발전으로 인해 이 단점은 사라지는 추세이다.

Wireframe

Wireframe - 선으로 윤곽선을 잡는 것.
Mockup - 실제 환경에 맞게 출력된 이미지.
Prototype - 간략한 형태로 구현한 시제품

SPA 설계는 wireframe 단계에서부터 어떠한 component 를 만들고 조합할고 재사용할지 생각한다.

Router

트위터를 예로 들면, 메인화면, 알림, 내 페이지 등으로 나눌 수 있다. 이때 페이지 전체가 새로 로딩되지 않지만 주소가 달라진다. 다른 주소에 따라 다른 뷰를 보여주는 것을 "routing" 이라고 한다.
리엑트는 자세 루팅 기능을 가지고 있지 않으며, React Router 라는 라이브러리를 주로 쓴다.
이를 위해 npx create-react-app appName 을 해준 후
앱의 폴더에서 npm install react-router-dom해준다.

React Router 의 주요 component

크게 세 가지로 나눌 수 있다.
1. <BrowserRouter>
2. <Switch>, <Route>
3. <Link>

이 컴포넌트들을 사용하려면 react router 라이브러리에서 불러와야 하며, App.js 상단에 다음 코드를 작성한다.

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

완성된 구조

<BrowserRouter>
  <div>
    <ul>
      <Link to="/"><li>홈</li></Link>
      <Link to="/mypage"><li>마이페이지</li></Link>
      <Link to="/settings"><li>설정</li></Link>
    </ul>

    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/mypage">
        <MyPage />
      </Route>
      <Route path="/settings">
        <Settings />
      </Route>
    </Switch>
    
  </div>
</BrowserRouter>

1. <BrowerRouter>
   웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경하게 해준다. 환경을 세팅하는 역할이다.

2. <Switch>, <Route>

• <Switch> - 여러 <Route> 를 감싸서 안에 있는 <Route> 중 경로가 일치하는 단 하나의 <Route> 를 렌더링하도록 만든다. <Switch> 가 없을 경우 매칭되는 모든 요소를 렌더링한다.
• <Route> - path 속성에 원하는 링크를 넣고, 자식 엘리먼트로 링크에 맞는 component 를 넣는다. <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.
  • exact 속성은 엄격한 매칭을 적용한다. 이 속성을 지정해주지 않을 경우 path를 포함하는 모든 링크를 매칭하여 첫 번째 링크로 이동한다.

3. <Link>
   HTML <a> 와 같은 역할로, 하이퍼링크를 만들어준다. <a> 태그는 클릭 시 페이지 전체를 새로 렌더링하지만, <Link> 컴포넌트는 이를 방지하는 기능이 있다.
   
   

느낀점

• Browser 도 화면을 그린다는 점에서 게임 프로그래밍과 비슷하다. 차이점이 있다면 아마도 게임은 PeekMessage 인 반면 브라우저는 GetMessage 기반일 것이다. 게임은 매 frame 마다 새 화면을 만들어 window 에 그리지만 브라우저는 코드를 읽고 그걸 브라우저에 한번 그리는게 전부다. 클릭같은 이벤트는 모두 GetMessage로 처리하며 변경된 데이터를 그려야 할 경우에만 다시 그릴 것이다. SPA 같은 경우 request 가 있을 때만 해당 부분의 데이터만 렌더링한다.