[React] SPA 는 무엇인가? / React Router 활용하기

SPA 란 무엇인가? 

• 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA Single-Page Application이다. 
• SPA는 페이지 전체가 아닌 바뀔 부분, 필요한 부분만 로딩한다. Header 나 Nav처럼 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽의 증가, 즉 자원의 낭비이다. 느린 반응성 때문에 쾌적한 사용자 경험을 제공하기가 어렵다. 
• 정리하자면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹사이트를 SPA라고 한다. 

SPA의 단점

• 첫 화면의 로딩 시간이 다소 길다는 단점이 있다. HTML은 거의 비어있는데, 대부분의 코드가 자바스크립트에 들어가 있기 때문에 이로 인해서 초기에 로딩되는 시간이 길다.
• 또한 검색엔진 최적화에 좋지 않다. 검색엔진이 리액트로만 이루어진 웹사이트를 분석하기 어려운데 그 이유는 앞서 설명한바와 같이 HTML 내에는 거의 정보가 없기 때문에 여기서 충분한 정보를 얻지 못해서이다. 다만 검색엔진이 발전하고 있어 이런 단점은 사라진느 추세이다.

컴포넌트를 어떻게 설계해야 하는가? 

• 리액트는 컴포넌트 기반 개발 방식을 사용한다. 따라서 페이지를 먼저 만들기 보다, 어떤 컴포넌트들을 만들고 이들을 어떻게 조합할지부터 구상해야한다. 
• 각 컴포넌트가 고유의 기능을 갖는 독립적인 존재는 맞지만, 그 안에서 다뤄지는 데이터들은 컴포넌트들끼리 유기적으로 주고받을 수 있도록 설계하여야 한다!

리액트 라우터?

• 리액트 SPA 에서는 경로에 따라 다른 뷰를 보여줄 수 있다. 즉 라우팅에 따라서 다른 뷰를 보여줄 수 있고, 이 때 사용하는 라이브러리가 React Router 이다. 
• 라우팅이란 다른 주소에 따라 다른 뷰를 보여주는 과정이다. 라우팅이라는 이름처럼 경로에 따라서 변한다는 의미이다. SPA 라고 하더라도 각각 다른 페이지 뷰를 가지고 있는데, 이 화면들에 주소를 부여하고 경로를 변경하여 다르게 표시할 수 있다. 

React Router 라이브러리

• 크게 세가지 부분으로 구분할 수 있다.
• 라우터 역할을 하는 BrowserRouter : 컴포넌트의 최상위에 작성되어 React Router의 컴포넌트를 활용할 수 있도록 한다. 
• 경로를 매칭해주는 Routes와 Route
  : Routes 컴포넌트 안에 Route 컴포넌트들을 작성한다. Routes 컴포넌트가 경로가 일치하는 하나의 Route만 렌더링한다. Route 컴포넌트 안에는 path 속성과 element 속성이 존재하는데, 이것이 경로와 그 경로에 일치하는 컴포넌트를 의미한다.
• 경로를 변경해주는 Link
  : a 태그와 비슷한 역할을 하는 Link 컴포넌트 즉, 누르면 화면(경로)를 변경시키는 역학을 해준다. Link 내의 to 속성에 알맞은 경로를 위치시켜 이동시킬 수 있도록 한다.
  a 요소는 페이지 전환시 처음부터 렌더링을 시키는 새로고침 현상이 있지만, Link 컴포넌트에는 페이지 전환을 방지하는 기능이 내장되어 있다. 따라서 SPA 구현에 적합하다.

 

• 먼저 라이브러리 사용을 위해서 각 컴포넌트를 불러온다. 

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

• 경로에 따라 다르게 표시될 컴포넌트 (화면)을 작성한다.

// Home 컴포넌트
const Home = () => {
  return <h1>Home</h1>;
};

// MyPage 컴포넌트
const MyPage = () => {
  return <h1>MyPage</h1>;
};

// Dashboard 컴포넌트
const Dashboard = () => {
  return <h1>Dashboard</h1>;
};

// 잘못된 경로 표시
const NotRightPath = () => {
  return <h1>경로를 확인하세요!</h1>;
};

 

• 각 컴포넌트로 이동시킬 메뉴 컴포넌트를 작성한다. 이 때 Router 컴포넌트들을 아래와 같이 위치시킨다. 

const SimpleRoute = () => {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
      </div>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/mypage" element={<MyPage />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<NotRightPath />} />
      </Routes>
    </BrowserRouter>
  );
};

export default SimpleRoute;