SPA 등장 배경
React에는 많은 장점이 있지만 그 중 대표적인 하나로 SPA(Single Page Application) 개발이 가능하다는 점 입니다. 과거에는 브라우저에서 서버로 요청을 보내면 각 페이지마다 1개의 HTML 파일을 응답으로 보내주는 방법을 사용했습니다. 이렇게 개발하는 어플리케이션을 MPA(Multi Page Application)라고 합니다. MPA 방식으로는 개발된 웹사이트는 페이지의 요소 중 일부만 변경되더라도 변경된 HTML 파일 전체를 로딩해야합니다.
시간이 흐름에 따라, 웹사이트와 사용자와의 상호작용이 증가하고 복잡한 형태를 가지게 되었습니다. 중복되는 요소를 불러와 화면에 보여주는 불필요한 트래픽을 줄이고 사용자에게 더 좋은 사용자 경험을 제공하기 위해 SPA의 개발이 시작되었습니다.
SPA 동작 방식
HTML 문서 전체가 아닌 필요한 데이터만 서버로 부터 전달 받아 JavaScript를 활용하여 동적으로 보여주는 방식입니다. SPA가 화면에 렌더링할 때, CSR(Client Side Rendering)이라 방식을 사용합니다.
CSR(Client Side Rendering)은 웹 브라우저에 주소 입력시 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 후에 서버에 요청해서 받아오는 방식으로 렌더링이 진행됩니다.
SSR(Sever Side Rendering)은 데이터까지 모두 삽입된 상태의 완성된 HTMl을 서버로부터 받아와 렌더링 합니다.
SPA 장점과 단점
장점
페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응합니다.
단점
- 브라우저는 첫 화면 로딩 시에 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.
- SEO(검색 엔진 최적화)가 좋지 않습니다. 검색 엔진은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석합니다. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못합니다.
React Router
URL 주소에 따라 다른 뷰를 보여주는 것을 라우팅이라하며 우리는 라우터를 통해 하나의 단 페이지에서 다른 페이지의 뷰를 화면에 렌더링 할 수 있습니다. 리액트는 자체적인 라우터가 없어 별도의 라이브러리를 설치해야합니다. 'react-router-dom'을 설치하기 위해서는 터미널에서 다음과 같이 입력합니다.
npm install react-router-dom-
< BrowserRouter >는 새로고침을 하지 않고 주소 변경에 따른 페이지 이동을 가능하게 해줍니다. React Router을 사용하고자하는 곳의 최상위에 작성 합니다.
-
< Routes > 컴포넌트는 여러 < Routes > 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. < Routes > 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
-
< Route > 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다.
< Link > 컴포넌트가 정해주는 URL 경로와 일치하는 경우에 페이지를 이동 시킵니다. 이 때, 새로고침이 발생하지 않습니다.
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // 모듈 불러오기
function Home() {
return <h1>Home</h1>;
}
function Hello() {
return <h1>Hello</h1>;
}
function World() {
return <h1>World</h1>;
}
const App = () => {
return (
<BrowserRouter>
<div>
<div className="App">
<main>
<ul>
// <--------------------------------------------------------->
// Link 컴포넌트로 감싼 요소를 클릭하면 정해진 경로로 이동하게 됩니다.
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/hello">HelloPage</Link>
</li>
<li>
<Link to="/world">WorldPage</Link>
</li>
// <--------------------------------------------------------->
</ul>
</main>
</div>
// <--------------------------------------------------------->
// path에 따라 렌더링할 컴포넌트를 지정해 줍니다.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/hello" element={<Hello />} />
<Route path="/world" element={<World />} />
</Routes>
// <--------------------------------------------------------->
</div>
</BrowserRouter>
);
};
export default App;