SPA (Single Page Application)
Single Page Application (SPA)는 한 개의 페이지로 구성된 어플리케이션을 말한다.
사용자가 애플리케이션을 사용하는 동안 서버로부터 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 받아와 동적으로 화면을 갱신한다.
SPA는 React, Angular, Vue.js 등의 프론트엔드 프레임워크에서 많이 사용된다. 이러한 프레임워크들은 SPA를 구현하기 위한 다양한 도우과 기능을 제공하는데 React에서는 React Router를 사용하여 SPA를 구현할 수 있다.
예시
- public/index.html
HTML 템플릿 파일, div id를 root로 해놓는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>- src/index.js
자바스크립트의 시작점. 여기서 위의 root id를 가진 div를 잡아준다.
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);- src/App.tsx
라우터를 이용해 SPA를 구현해준다.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>,
document.getElementById('root')
);전통적인 웹 사이트를 만들 때 여러개의 페이지를 만들면 a.html, b.html 이런식으로 만들었다.
하지만 요즘에는 웹 사이트 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.
SPA에서 화면변경
HTML5의 History API를 사용. 하지만 요즘에는 Link 컴포넌트를 이용해 화면 변경하는 방법을 더 많이 사용한다고 한다.
- History.back() : 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과를 낸다.
- History.foword() : 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과를 낸다.
- History.go() : 특정한 세션 기록으로 이동하게 해 주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동한다.
- History.pushState() : 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 javascript 객체를 저장하는 것이 가능하다.
- History.replaceState() : 최근 세션 기록 스택의 내용을 주어진 데이터로 교체한다.
