React SPA와 React Router

SPA(Single Page Application)란?

예전의 웹 사이트는 페이지를 로딩할 때 서버에 미리 준비되어 있는 페이지를 전달 받아 렌더링을 했지만 웹 애플리케이션의 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라 속도 저하 등의 문제가 발생하게 되었다. React에서는 이러한 문제를 해결하기 위해 SPA를 사용한다.

SPA란 서버로부터 완전한 페이지를 불러오는 것이 아닌 필요한 데이터만 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이다.

SPA의 장단점

장점

• 필요한 부분의 데이터만 받아 화면을 업데이트 하기 때문에 사용자와의 Interaction(상호작용)에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 줄어든다.
• 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저 경험을 제공한다.

단점

• JavaScript 파일의 크기가 크기 때문에 첫 화면 로딩 시간이 길어진다.
• HTML 파일에 별다른 자료가 없기 때문에 검색 엔진 최적화(SEO)에 좋지 읺다.

React Router

• SPA는 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않고 화면에 따라 주소가 달라진다. 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다.'라는 의미로 라우팅(Routing)이라고 한다.
• React SPA에서는 경로에 따라 다른 뷰를 보여주기 위해 React Router라는 라이브러리를 사용한다.

React Router 주요 컴포넌트

• React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 경로를 변경하는 역할을 하는 Link가 있다.

React Router 시작하기

1. 개발환경 구축

// test 디렉토리에 React App 설치
npx create-react-app test
cd test

// React-Router 라이브러리 설치
npm install react-router-dom

// App.js로 react-router 컴포넌트 가져오기
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
	return ( ... )
}

• package.json 파일의 dependencies 항목에 react-router-dom이라는 라이브러리가 등록된 것을 확인할 수 있다.

2. 라우트 준비하기

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

• 페이지를 표시하는 컴포넌트 Home, MyPage, Dashboard 생성

3. 메뉴 만들기

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

• 페이지를 표시하는 컴포넌트를 만들고 각 컴포넌트로 이동할 메뉴를 <ul>, <li>요소를 이용해만든다.

4. 주소에 따라 페이지 뷰 다르게 만들기

4-1. BrowserRouter

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

• <BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
• <BrowserRouter>가 최상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

BrowserRouter - index.js

// index.js (React Version 18 기준)
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);    

• ReactDOM의 렌더 단계인 index.js 에 <BrowserRouter>를 넣어서 활용할 수도 있다.

4-2. Routes, Route

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

        // 주소 경로(path)와 아까 만든 3개의 컴포넌트(element)를 연결
        <Routes>
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
   </BrowserRouter>
  )
}

export default App;

• 경로를 매칭해주는 역할을 하는 컴포넌트로 <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링 시킨다. <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

TIP : 사용자가 지정한 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있는데 이때 path=”*” 속성을 사용하면 지정되지 않은 주소로 접근 시 이 속성이 설정되어 있는 컴포넌트를 보여준다.

4-3. Link

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
          
            <li>
              // to 속성을 활용하여 <Route> 컴포넌트에 설정해준 path 주소를 연결
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
            
          </ul>
        </nav>
         <Routes>
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

• 경로를 연결해 주는 역할을 하는 컴포넌트로 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경한다.
• 해당 컴포넌트를 클릭할 때 Route의 path와 일치하는 페이지로 이동할 수 있게 해준다.
• ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀌는 모습을 볼 수 있다.

React Router에서 <a> 요소가 아닌 <Link>를 사용하는 이유?

• <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시키기 때문에 새로고침이 발생한다.
• 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.