[React] React SPA

SPA (Single Page Application)

같은 웹 페이지 상에서 인기/게임 탭 등을 클릭하면 안의 컨텐츠만 바뀌는 것을 볼 수 있다. 스크린샷은 NAVER 메인화면. 

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. 이와 같은 행위를 보통 깜빡인다고 표현함. 웹사이트가 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더 많은 상호작용이 일어났고, 이때마다 매번 모든 페이지를 불러오는 일은 더 느린 반응성과 불필요한 트래픽을 발생시켰다.

이런 일을 방지하기 위해 SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아닌, 화면 업데이트에 필요한 데이터만 서버에서 전달받고, 브라우저에서는 해당 부분만 업데이트 하는 방식으로 작동한다.

 

SPA의 장점

1) 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 상호작용에 빠르게 반응

2) 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 줄어듦

3) 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저경험 제공

 

SPA의 단점

1) HTML 파일은 거의 비어있고 대부분의 코드가 JavaScript 파일 안에 있다보니 크기가 무겁다. 때문에 첫 화면 로딩 시간이 길어질 수 있음

2) 검색 엔진 최적화(SEO)가 좋지 않다. 많은 검색 엔진은 HTML 파일에 있는 자료를 분석해 기능하기 때문에. 검색 노출이 중요한 웹 애플리케이션은 SEO에 대응책이 따로 필요하기 때문에 개발 복잡도가 상승할 수 있음. 
다만 SPA에서도 SEO에 대응할 수 있도록 검색 엔진이 발전하고 있기 때문에 이 단점은 사라지는 추세.

 

 

 

Router

한 페이지 안에 다양한 뷰를 보여주는 SPA의 특성은 Router를 통해 가능하다. 

React SPA는 라우팅을 위해 React Router 라이브러리를 가장 많이 사용한다. 

react-router 설치: npm install react-router-dom 

컴포넌트를 꺼내오기 위한 import 구문:import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; 

 

React Router 주요 컴포넌트

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

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

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

export default App;

<BrowserRouter>

웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. 

가장 상위에 작성되어야 react-router의 컴포넌트들을 사용할 수 있다.

 

<Routes>

여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜지는 역할을 한다. <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

 

<Route>

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

 

<Link>

경로를 연결해주는 역할. <a> 요소는 페이지를 전환하는 과정에서 새로고침 현상이 발생한다. 하지만 <Link> 컴포넌트는 페이지 전환 방지 기능이 내장되어 있어 SPA 구현이 가능하다. 

 

 

BrowserRouter & HashRouter

BrowserRouter

<Link> 태그는 URL을 이동하며 페이지를 불러오는 것이 아닌 단순히 주소만 바꿔주며 컴포넌트들을 렌더링하는 역할을 한다. 그렇기 때문에 새로고침을 하거나 URL로 직접 접근할 경우 경로를 찾지 못해 에러가 발생한다. 

 

HashRouter

1) 주소에 # 가 붙는다. 

2) 새로고침해도 에러가 발생하지 않는다. 새로고침 시, # 이전의 URL만 서버를 통해 불러온다. 맨 처음 페이지만 불러오기때문에 에러가 발생하지 않는다.

3) 단, # 때문에 SEO가 좋지 않다.