[React] SPA(Single Page Application) 만들기
MPA(Multiple Page Application)
: 페이지마다 새로운 html을 받아와 화면에 보여주는 방식(깜빡인다고 표현함)
웹사이트가 복잡해지고 애플리케이션 형태를 가지게 되면서
사용자와 서비스 사이의 상호작용이 많아지고
트래픽 증가, 느린 반응성으로 사용자 경험의 저하를 야기시킴
(Header, Navigation Bar 등 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽 발생시킴)
SPA(Single Page Application)
: html 문서 전체가 아니라 필요한 데이터만 받아 업데이트하는 방식
업데이트에 필요한 데이터만 서버에서 전달받아 동적으로 HTML요소를 생성해서 화면에 보여주는 방식
JS와 historyAPI를 이용해 구현할 수 있는데
이를 쉽게하도록 도와주는 라이브러리가 react-router-dom
SPA 장점
1. 사용자와 상호작용이 빠름
2. 서버 과부하 문제가 줄어듦
=> 더 나은 유저경험 제공
ex) 유튜브, 페이스북, 구글, 에어비앤비, 넷플릭스
SPA 단점
1. JS파일 크기가 커서 첫 화면 로딩 시간이 긺
(대부분의 코드가 JS파일에 들어있기 때문에 html은 거의 비어있음)
2. 검색엔진최적화(SEO)가 좋지 않음
검색엔진들은 HTML파일의 태그나 링크를 분석하는 방식으로 검색 기능 구동
검색엔진최적화에 대한 대응책 마련
-> SPA 검색엔진최적화를 위해 검색엔진이 발전하고 있어서 이 단점은 없어지는 중임
3. 앱 내에서 앞으로 가기, 뒤로 가기 등 상태 관리에 주의 필요
-> 개발 복잡도가 늘어남
create-react-app, react-router-dom 이용하여 간단한 SPA 만들기
1. 라이브러리 설치
npx create-react-app@latest simpleroute
npm install react-router-dom@^6.3.0* Semantic Versioning 틸드(~), 캐럿(^) 참고
아래부터 routing 주소에 따라 다른 뷰를 보여주는 과정
2. react-router-dom을 사용하기 위한 기본 설정(BrowserRouter)
// index.js
// 라이브러리 불러오기
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
// React Version 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// React Version 17
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));BrowserRouter
: History API를 이용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해 줌
3. 페이지 이동(주소창 path 변경) 시 보여질 컴포넌트 설정(Routes, Route)
import React from 'react';
import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import About from './Pages/About';
const App = () => {
return (
<BrowserRouter>
<div className="App">
<main>
<Sidebar />
<Routes>
<Route path="/" element={<Tweets />} />
<Route path="/about" element={<About />} />
</Routes>
</main>
</div>
</BrowserRouter>
);
};
export default App;Routes
여러 Route 컴포넌트를 감싸고, 그중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜줌.
불러오고 싶은 자리에 위치시킴
Routes로 감싸지 않는다면 매칭되는 모든 요소를 렌더링
Route
path 속성을 지정하여 주소(경로) 설정, 해당 주소에서 보여줄 컴포넌트를 element 속성으로 지정한다
path="*"와 element로 의도하지 않은 페이지에 접근할 경우 제어할 수 있음
4. 주소(path)를 바꿔줄 메뉴 만들기
const Sidebar = () => {
return (
<section className="sidebar">
<Link to="/about">
<i className="far fa-question-circle"></i>
</Link>
</section>
)
}Link
경로를 연결해 주는 역할. 페이지 전환을 방지하는 기능이 내장
a 요소는 페이지를 새로 불러옴(처음부터 다시 렌더링= 새로고침)
useNavigate
함수 내부에서 주소를 바꿔야 할 때 사용
특정 행동을 했을 때 해당 주소로 이동시켜 주는 역할
function MypageForm() {
let navigate = useNavigate();
function handleClick() {
if(로그인 한 상태) {
navigate('/mypage');
} else {
navigate('/login');
}
}
return <button onClick={handleClick}>마이페이지</button>;
}let navigate = useNavigate()
// 뒤로 가기
navigate(-1)
// 앞으로 가기
navigate(1)
// 새로고침
navigate(0)(참고 historyAPI)
// 뒤로 가기
history.back()
history.go(-1)
// 앞으로 가기
history.forward()
history.go(1)
// 새로고침
history.go(0)
5. 라우트(Route)에 연결할 컴포넌트 만들기
- 컴포넌트, 변경할 화면
const About = (props) => {
return (
<section className="aboutTwittler">
// 생략
</section>
)
}
22.11.28
코스 S2U5