📖React SPA
🏷️SPA(Single-Page Application)
- 한 개의 페이지로만 구성된 애플리케이션이다. 한 페이지만 불러온 후 기존 페이지의 내부를 수정해서 보여주는 방식이다.
- 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 갱신이 필요한 부분만 데이터를 받아 해당 부분만 업데이트하는 웹 애플리케이션이다.
🔎MPA(Multiple Page Application)
- 여러개의 페이지로 구성된 애플리케이션이다.
- 새로운 페이지를 불러올 때마다 매번 전체 페이지가 다시 렌더링된다.
🏷️SPA의 장, 단점
장점
- 전체 페이지가 아니라 필요한 부분만 데이터를 받아 업데이트하기 때문에 사용자의 행동에 빠르게 반응한다.
- 서버에서는 요청받은 데이터만 넘겨주기 때문에 서부 과부하 문제가 적다.
- 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다.
단점
- 첫 화면 로딩 시 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 JavaScript 파일이 무거워지고 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.
- 검색 엔진은 HTML 문서 내 자료를 분석하므로 검색 엔진 최적화가 좋지 않다.
📖React Router
🏷️Router
SPA를 만들 때 여러가지 화면이 필요하고 각각 상황에 맞는 화면을 보여줘야할 때, 각각의 화면마다 주소를 정하고 주소에 따라 다른 화면을 보여주는 과정을 라우팅이라고 한다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.
🏷️React Router의 주요 컴포넌트
- BrowserRouter: 라우터 역할
- Routes 와 Route: 경로 매칭
- Link: 경로 변경
🏷️React Router 사용법
사용 환경 세팅
- 리액트 프로젝트 생성
npx create-react-app@latest 폴더이름 - 리액트 라우더 설치
npm install react-router-dom@^6.3.0(6.3.0버전) - 리액트 라우더 라이브러리가 제공하는 컴포넌트 사용
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";** 라이브러리도 객체와 같다고 생각하면 편함 {BrowserRouter: ... , Routes: ... , Link: ....}
BrowserRouter
<BrowserRouter> 컴포넌트는 자바스크럽트와 History API를 사용해 새로고침하지 않고도 주소를 변경할 수 있게 해준다.
** History API: history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공
<BrowserRouter>가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.
Routes, Route
<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다.
<Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
<Route> 컴포넌트는 path 속성에 주소를 지정하고 element 속성으로 연결할 컴포넌트를 지정해준다.
* 지정되지 않은 주소로 접근할 시에는 `path=””`으로 설정되어 있는 컴포넌트를 보여준다.
Link
<Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해 준다.
<a>요소가 아닌<Link>를 사용하는 이유
<a>요소를 사용하면 새로고침을 통해 페이지를 불러오지만<Link>컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있다.
// 사용 환경 세팅
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
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> //Routes와 Route로 주소와 연결 컴포넌트 지정
<Route path='/' element={<Home />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
</div>
</BrowserRouter>
)
}
// Home 컴포넌트
function Home() {
return <h1>Home</h1>;
}
// MyPage 컴포넌트
function MyPage() {
return <h1>MyPage</h1>;
}
// Dashboard 컴포넌트
function Dashboard() {
return <h1>Dashboard</h1>;
}
export default App;