React_4. SPA와 Router

SPA의 개념

SPA(Single-Page Application)은 전통적인 웹사이트가 페이지 전환 시에 전체 페이지를 업데이트했던 것과는 달리 필요한 부분만을 업데이트하여 동적으로 생성하는 방식이다. 이러한 방식은 중복되는 요소를 매번 불러올 필요가 없어 트래픽 발생을 줄이고 더 빠른 반응성을 가진다는 장점이 있다. SPA 방식이 사용된 대표적인 예는 바로 유튜브로 내가 보고 싶은 동영상을 클릭하면 상단 헤더를 제외한 필요한 부분만 바뀌는 것을 볼 수 있다.

그러나 이러한 SPA는 단점도 가지고 있으며 대표적인 단점은 바로 자바스크립트의 크기가 너무 커진다는 점이다. 이렇게 무거워진 자바스크립트 파일은 웹 페이지의 로딩 시간을 늘리게 되며 상대적으로 비게 된 HTML은 검색 엔진 최적화에 좋지 않다는 단점을 가진다.

Router를 이용한 SPA 구현

그렇다면 SPA와 같이 페이지 일부만을 바꾸려면 어떻게 해야 할까? 특정 부분의 화면이 바뀌려면 일단 주소를 변경해야 한다. 이러한 과정을 경로에 따라 변경된다는 의미로 '라우팅'이라고 하며 리액트에선 React Router라는 라이브러리를 주로 사용한다.

React Router는 크게 3가지의 주요 컴포넌트로 구성된다. BrowserRouter는 라우터 역할을 하며 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. Switch와 Route는 경로를 매칭해주는 역할을 하며, Link는 경로를 변경한다.

React Router 사용법

이제 실제로 코드를 작성해 보자. React Router를 사용하기 위해서는 일단 터미널을 통해 해당 디렉토리로 접근한 뒤 다음 명령어를 통해 설치한다.
npm install react-router-dom

package.json을 통해 설치가 잘 되었는지 확인한 후 작성한 js파일(ex) App.js) 상단에 다음과 같은 구문을 추가한다.

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

추가가 완료되면 주요 컴포넌트를 작성한다. 먼저 BrowserRouter와 Link 컴포넌트를 작성해보자.

import Home from './page/Home'; 
import About from './page/About';

function Sidebar() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">
              Home
            </Link>
            <Link to="/about">
              About
            </Link>
          </li>
        </ul>
      </div>
    </BrowserRouter>
  )
}

Home과 About으로 연결되는 두 li요소를 가진 Sidebar를 구현하였다. BrowserRouter는 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 만들어주며 작성하려는 컴포넌트의 최상단에 위치해야 한다. 각각의 li요소를 클릭하면 Link 컴포넌트를 통해 경로가 변경된다. Link는 HTML5 History API를 사용해 브라우저의 주소만을 바꾸며 페이지를 새로고침 하지 않는다. 이것이 바로 a태그와의 차이점이다.

다음으로 Switch와 Route를 통해 경로를 매칭해보자.

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
</Switch>

다음과 같이 추가하면 Link가 클릭 되었을 때 어떤 루트와 연결될 것인지 설정된다. 여기서 exact와 Switch가 무슨 용도인지 궁금할 수 있다. 각각의 컴포넌트는 path 속성을 통해 렌더링 되는 url 이 정해진다. 그러나 홈페이지 접속 시 about의 앞에도 '/'이 존재하기 때문에 홈과 어바웃이 모두 매칭되는 사태가 일어난다. 그러한 상황을 방지하기 위해서 exact를 붙이면 정확하게 일치하는 url의 컴포넌트를 렌더링 한다. 또한 Switch 를 이용하면 같은 url이 두 개가 존재해도 처음 매칭하는 url 만 렌더링하며, 이러한 기능은 특정 path 없이 오류 시에만 보여주는 페이지 등을 구성할 때 유용하다.

참고
React Router 공식문서
배하람님의 블로그 - Switch는 언제 써야 할까?