SPA 방식으로 만들어진 대표적인 서비스로는 Youtube, facebook, Netflix 등이 있다.

SPA(Single Page Application)란?

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다. 전통적인 웹사이트는 페이지 전체를 로딩하지만, SPA는 메뉴와 헤더, 푸터와 같이 페이지 전환시 중복되는 부분은 새로 불러오지 않는다.

SPA의 장단점

예를 들어 SNS에서 좋아요를 누르고 댓글을 다는 등 앱과 사용자 사이에 수시로 상호작용이 발생하게 되는데, 이 때 SPA는 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 사용자의 행동에 빠르게 반응하고 보다 나은 사용자 경험을 제공할 수 있게 된다. 또한 서버 입장에서는 요청받은 데이터만 넘겨주면 되므로 과거와 같은 과부하 문제도 현저히 줄일 수 있다.

이러한 장점들 때문에 SPA를 많이 사용하지만, SPA도 단점이 있다. 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 JS 파일을 다시 받아오는 과정을 거친다. 이 때 HTML 파일은 거의 비어있고 대부분의 코드가 JS 파일에 들어있다 보니 자연스럽게 JS 파일이 무거워져 첫 화면 로딩 시간이 길어진다. 두 번째로는 검색 엔진 최적화가 좋지 않다. 검색 엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 뜻한다. 쉽게 말해, 사용자가 검색했을 때 얼마나 잘 나오냐는 것이다. 앞서 말했듯이 HTML 파일이 거의 비어 있기 때문에 검색 로봇이 충분한 자료를 수집할 수 없게 되고 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 한다. 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야하기 때문에 개발은 더 복잡해진다. 다만 검색 엔진도 발전하고 있어서 점차 이 단점은 사라지고 있는 추세이다.

React Router

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지는 않는다. 예를 들어 트위터는 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요하고 화면에 따라 주소도 다르다. 이렇게 주소에 따라 다른 화면을 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다. 하지만 리액트 내장 기능이 아니므로 라우팅을 위해 React Router 라이브러리를 사용한다.

React Router 주요 컴포넌트

리액트 라우터의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.

• 라우터 역할을 하는 BrowserRouter는 라우터 컴포넌트 중에서 최상위 컴포넌트이다.
• 경로를 매칭해주는 Routes와 Route는 부모-자식 관계이다.
• 경로를 변경하는 역할을 하는 Link는 html의 a를 대체한다.

React Router 사용 환경 세팅

1. react-router(react-router-dom) 라이브러리 설치

npm install react-router-dom@^6.3.0

2. App.js 또는 index.js에 컴포넌트 import

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

3. 사용 방법

// 방법1) App.js에서 BrowserRouter를 import 하는 경우
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App(){
  <BrowserRouter>
    <div className='App'>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>

      <Routes>
        <Route pata="/" element={<Home />} />
      </Routes>
    </div>
  </BrowserRouter>
}

✍️ 공부할 때는 방법1을 보고 이해를 하고 쓸 때는 방법2를 쓰자!

// 방법2) index.js에서 BrowserRoute를 import 하는 경우
import React from 'react';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter><App /></BrowserRouter>,
  document.getElementById('root')
);

//App.js에서는 BrowerRoute 외에 다른 컴포넌트만 import
import React from "react";
import { Routes, Route, Link } from "react-router-dom";

function App(){
  return (
    <div className='App'>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>
      
      <Routes>
        <Route pata="/" element={<Home />} />
      </Routes>
    </div>    
  )
}