MPA(Multi-Page Application)

• 여러 개의 페이지로 구성된 애플리케이션
• 전통적인 웹 애플리케이션 개발 방식
• 각 페이지는 서버로부터 HTML을 받아와 페이지를 새로고침하여 렌더링한다.
• 페이지 전환 시 서버로부터 새로운 페이지를 받아와서 로딩이 발생할 수 있다.
• 서버로부터 받은 HTML에는 해당 페이지에 필요한 스타일시트, 스크립트 등이 포함된다.

SPA(Single-Page Application)

• 단일 페이지로 구성된 애플리케이션
• 초기에 필요한 리소스(HTML, CSS, JavaScript)를 한 번에 로드하고, 이후에는 필요한 부분만 업데이트하여 렌더링한다.
• 페이지 전환 시 서버로부터 새로운 페이지를 받아오지 않고, 클라이언트 측에서 라우팅을 처리하여 해당하는 컴포넌트를 동적으로 로드한다.

SPA를 개발하는 이유

• 부드러운 사용자 경험
• 빠른 반응성
• 적은 서버 요청량

---

React Router

• 주소에 따라 다른 뷰를 보여주는 과정 라우팅(Routing)이라고 한다.
• React SPA에서 라우팅을 하기 위해 React Router 라이브러리를 많이 사용한다.

3가지 주요 컴포넌트

• 해당 컴포넌트들을 사용하기 위해서는 react-router-dom을 다운받고 import 시켜야 한다.

npm install react-router-dom@^6.3.0

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

1. BrowserRouter

• 클라이언트 측 라우팅을 구현하는 데 사용
• history API를 사용하여 브라우저의 URL을 관리하고, 해당 URL에 따라 적절한 컴포넌트를 렌더링 한다.
• 애플리케이션의 최상위에 위치해야 한다.

<BrowserRouter></BrowserRouter>

2. Routes, Route(경로 매칭)

• BrowserRouter 내에 위치해야 한다.
• Routes 컴포넌트는 선택이며 Route의 구성을 명시적으로 보여주기 위해 적용한다.
• Route는 경로와 해당 경로에 매칭될 컴포넌트를 설정하기 위해 사용한다.
• Route는 경로(path)와 렌더링할 컴포넌트(element)를 받아 현재 URL이 일치할 경우 해당 컴포넌트를 렌더링 한다.

<Routes>
	<Route path="/" element={<Home />} />
</Routes>

3. Link(경로 변경)

• 클라이언트 측에서 내비게이션을 처리하기 위해 사용한다.
• 클릭 가능한 링크를 생성하고, 클릭 하면 브라우저의 URL을 변경하고 라우팅을 처리한다.
• 페이지 전환 시 새로고침 없이 컴포넌트를 렌더링할 수 있다.

<Link to="/"></Link>