🧡 SPA
Single Page Application 으로 한 개의 페이지로 구성된 애플리케이션입니다. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드하고, 새로운 페이지 요청이 있을 때마다 갱신에 필요한 데이터만 전달 받아서 갱신합니다 이를 CSR(Clien Side Renderin)이라고 합니다.
- 첫 요청시 딱 한 페이지만 불러오고, 이동시 기존 페이지의 내부를 수정해서 보여주는 방식입니다. 최초 로딩 이후부터는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위한 필요한 데이터면 전달받아 해당 부분만 업데이트 하는 방식으로 작동하므로 자연스러운 페이지 이동과 UX를 제공할 수 있습니다.
- SEO(검색엔진최적화) 가 어렵습니다. 검색엔진이 색인할 만한 컨텐츠가 존재하지 않아보이기 때문입니다.
💚 SPA의 장점과 단점
장점
- 전체 페이지를 업데이트 하는 것이 아니므로 상호작용시 빠르게 반응하고, 깜박이는 현상이 없어 자연스러운 UX경험을 제공합니다.
- 필요한 리소스만 부분적으로 로딩하므로, 성능면에서 유리합니다. 서버에게 한번만 요청하고 받은 데이터를 전부 캐시에 저장해 놓습니다.
- 페이지를 다운로드 하기 위해 추가 쿼리를 사용할 필요가 없습니다.
- 서버 템플릿 연산을 클라이언트로 분산해서 성능이 좋습니다
- 컴포넌트별로 개발이 용이하여 생산성이 높습니다.
- 모바일 앱 개발을 염두해 두면 동일한 API를 사용하도록 설계할 수 있습니다.
단점
- 복잡한 웹 애플리세이션을 위해 대용량 파일을 유지 관리하는 것은 어렵습니다.
- 자바스크립트 파일을 번들링해서 한 번에 받으므로, 자바스크립트 파일의 크기가 커서 초기 구동속도는 느립니다.
- SPA는 HTML이 거의 비어있어 자료수집이 어렵고, 초기 로드시간으로 검색엔진 최적화가 어렵습니다. 따라서 대응책을 따로 마련해야 하고, 앱 안에서 상태관리(뒤로가기 등)도 해야하므로 개발의 복잡도가 늘어납니다.
🎀 검색 엔진 최적화?
- 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 말합니다.
검색 로봇이 웹페이지에 있는 정보를 수집하고 분석해서 결괏 값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하던 인덱스에서 검색어와 연관성이 높은 웹페이지들을 순서대로 보여주는 방식으로 작동합니다.- 검색 로봇은 자료를 수집할 때 URL, HTML내 각종 태그나 링크 등을 분석합니다.
- CSR 방식에서는 클라이언트 측 쿠기말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않아 보안면에서 이슈가 있습니다.
단점 극복 방안
- Webpack의 code splitting으로 초기구동속도를 극복할 수 있습니다.
- SSR로 검색엔진 최적화를 극복할 수 있습니다.
🎀 SPA 방식이 모두 CSR인 것은 아닙니다.
🧡 MPA
Multiple Page Application 으로 여러 개의 페이지로 구성된 애플리케이션입니다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운되고 매번 전체 페이지가 다시 렌더링 됩니다. 이를 SSR(Server Side Rendering)이라고 합니다.
장점
- SEO 관점에서 유리합니다. MPA는 완성된 형태의 HTML 파일을 전달받으므로 검색엔진이 페이지를 크롤링 하기에 적합합니다.
- 서버에서 이미 렌더링 해서 가져오므로, 첫 로딩이 매우 짧습니다. 다만, 클라이언트가 JS파일을 모두 다운로드하고 적용하기 전까지 각 기능이 동작하지 않습니다.
단점
- 새로운 페이지를 이동하면, 매 요청마다 새로고침하며 전체 페이지를 다시 렌더링하면서 깜빡이는 현상이 생깁니다.
- 페이지 이동시 불필요한 템플릿도 중복해서 로딩하여 성능면에서 낭비가 있습니다.
- 서버 렌더링에 따른 부하가 있습니다.
- 모바일 앱 개발시 추가적인 백엔드 작업이 필요해 생산성이 떨어집니다.
🧡 React Router
-
SPA를 만들 때, 필요한 화면들 따라 '주소'도 달라집니다. 이 주소에 따라 다른 뷰를 보여주는 과정을 '라우팅'이라고 합니다. 리액트에서는 라우팅을 위해 React Router라는 라이브러리를 사용합니다.
-
라우터 역할을 하는 BrowserRouter, 경로를 매칭해 주는 Routes와 Route, 경로를 변경하는 역할을 하는 link 컴포넌트로 나뉩니다. 이 컴포넌트들을 사용하기위해 따로 불러와야 합니다.
개발환경 구축하기
#react App 설치하고 시작하기
npx create-react-app@latest 폴더명
cd 폴더명
npm start
#react-router 라이브러리 설치(버전과 설치폴더 주의)
npm install react-router-dom@^6.3.0
# 잘 설치되었다면, `package.json` 파일의 `dependencies`항목에 react-router-dom 라이브러리 등록을 확인 할 수 있다.
#컴포넌트를 꺼내오기 -> App.js 최상단에 세팅
import React form "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
라우트 준비하기
BrowserRouter
# 컴포넌트 만들기 -> Home을 예로 들어 만들어 봅니다.
function Home() {
return <h1>Home</h1>;
}
# 메뉴 만들기 -> 각 컴포넌트로 이동할 메뉴를 제작
function app () {
return (
<BrowserRouter> #페이지를 새로고침 하지 않고도 주소를 변경할 수 있게 해줍니다. 상위에 작성되어 있어야 사용할 수 있습니다.
<div>
<nav>
<ul>
<li>
Home
</li>
</ul>
</nav>
</div>
</BrowserRouter>
)
}
export default App;
# <BrowserRouter> 은 index.js에 넣어서 활용할 수도 있습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
#React Ver.18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
#React ver.17
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));Routes, Route
- 경로를 매칭해주는 역할을 하는 컴포넌트입니다.
- Routes : 여러 Route 컴포넌트를 감사 그 중 경로가 일치하는 단 하나의 라우터만 렌더링합니다, 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
- Route : path 속성을 지정해 해당 path에서 어떤 컴포넌트를 보여줄 지 정합니다. 경로와 컴포넌트 이름이 동일해야 헷갈리지 않습니다.
function app () {
return (
<BrowserRouter> #페이지를 새로고침 하지 않고도 주소를 변경할 수 있게 해줍니다. 상위에 작성되어 있어야 사용할 수 있습니다.
<div>
<nav>
<ul>
<li>
Home
</li>
</ul>
</nav>
<Routes>
<Route Path = "/" element = {<Home />} />
</Routes>
</div>
</BrowserRouter>
)
}
export default App;
# 경로는 path로, 컴포넌트는 element로 연결해 줍니다.
# 지정되지 않은 주소로 접근할 시 보여줄 컴포넌트 속성으로는 path="*" 를 씁니다.Link
- 경로를 연결해주는 역할을 하는 컴포넌트 입니다. 페이지 전환시 애플리케이션을 그대로 유지해 History API를 이용해 주소만 변경해 줍니다.
<a>요소에 해당하지만,<a>요소는 페이지 전환시 다시 불러오므로 처음부터 렌더링 시킵니다.<link>는 페이지전환을 방지하는 기능이 내제되어 있어 SPA를 구현합니다.
function app () {
return (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to "/"> Home</Link>
# Link 컴포넌트로 경로를 연결합니다.
</li>
</ul>
</nav>
<Routes>
<Route Path = "/" element = {<Home />} />
# 경로는 path로 컴포넌트는 element로 연결해 줍니다.
</Routes>
</div>
</BrowserRouter>
)
}
export default App;
npm run start #구현을 확인합니다.
개발자가 되고 싶어 둥당둥당