[React] SPA, React Router

SPA

싱글 페이지 애플리케이션(Single-Page Application, SPA)는 서버로부터 완전히 새로운 페이지를 불러오지 않고 갱신에 필요한 데이터만 받아, JS가 동적으로 HTML 요소를 생성하여 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트이다. 2000년대 중반에 보편화되어 Youtube, Facebook, Netflix 등 일상적으로 사용하는 다양한 서비스가 SPA로 제작되어 있다. SPA는 페이지를 이동할 때 매번 페이지 전체를 불러오는 전통적인 웹 사이트에 비해 여러가지 장점을 가진다.

SPA 장점

• 빠른 사용자 상호작용(Interaction)
  - 필요한 부분만 업데이트하므로 유저의 행동에 빠르게 반응(퍼포먼스 향상)
• 서버 과부화 완화
  - 서버에서는 요청받은 데이터만 전송하므로 트래픽 감소
• 자연스러운 사용자 경험(UX)
  - 화면 전체를 렌더링할 필요가 없어 더 나은 유저 경험 제공

SPA 단점

• 느린 초기 구동 속도
  - JS 파일 용량이 크므로 첫 화면의 로딩 시간이 김
  - 코드 분할(Code Splitting)으로 해결
• 검색 엔진 최적화(SEO) 문제
  - HTML이 거의 비어있어 검색 로봇이 충분한 자료를 수집 못함

React Router

SPA는 하나의 페이지를 가지지만 한 종류의 화면만 사용하지 않는다. 사용자의 행동에 따라 주소를 변경해서 여러 화면을 교체하며 보여준다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅(Routing)이라고 한다. 하지만 React에는 해당 기능이 내장되어 있지 않으므로 라이브러리를 사용한다. 대표적인 라이브러리가 React Router이다.

React Router DOM 라이브러리 설치

$ npm install react-router-dom

React Router 주요 컴포넌트

JS 파일에서 컴포넌트 호출

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

라우터 역할: BrowserRouter
<BrowserRouter> 컴포넌트는 HTML5의 History API를 사용해 페이지 새로고침 없이 주소를 변경할 수 있게 하는 라우터 역할을 한다. <Route> 컴포넌트의 path 속성을 <Link>의 to 속성과 매핑한다. BrowserRouter가 다른 Route 컴포넌트보다 상위 컴포넌트여야 나머지 Route 컴포넌트를 사용할 수 있다.

경로 매칭 역할: Switch, Route
<Switch> 컴포넌트는 여러 <Route>를 감싸서 경로가 일치하는 하나의 라우터만 렌더링을 시켜준다.

<Route> 컴포넌트는 path 속성을 정의하고 해당 path에 어떤 뷰를 보여줄지 지정한다. path가 <Link> 컴포넌트가 정하는 URL 경로와 일치하는 경우에만 작동한다.

경로 변경 역할: Link
<Link> 컴포넌트는 해당 컴포넌트를 클릭할 때 to 속성을 이용해 <Route>의 path 주소와 일치하는 페이지로 이동할 수 있게 한다. ReactDOM으로 렌더를 시키면 <a> 태그로 변하지만 새로고침 현상이 일어나는 <a>와 다르게 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장돼있다.

React Router 사용 예

    <BrowserRouter>
      <Link to="/">
        <i className="far fa-comment-dots"></i>
      </Link>
      <Link to="/about">
        <i className="far fa-question-circle"></i>
      </Link>
      
      <Switch>
        <Route exact path="/">	/*exact 속성: 정확히 일치하는 URL만 렌더링*/
          <Tweets />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </BrowserRouter>