1. SPA

• Single Page Application
• 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식

1.1 SPA의 반대: MPA

• Multi Page Application
• 서버에 미리 페이지를 빌드해두고 라우팅을 처리하는 방식으로 페이지를 관리
• 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지간 데이터 재활용이 힘듬

1.2 특징

• CSR 기술을 활용해 페이지 진입시 리로드없이 라우팅함
• AJAX기술을 활용해 페이지 이동시 데이터만 요청해 JS로 페이지를 만듬
• 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현
• JS만을 활용해 전체 페이지를 만들기에 첫 요청시 빈페이지를 받게됨

1.3 장점

1. 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱 가능
2. 네트워크 요청이 줄어듦
3. 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴을 적용할 수 있음

1.4 단점

1. MPA보다 SEO에 불리함
2. 하나의 JS앱이 지속하므로, 메모리 관리 및 성능, 데이터 활용등이 중요
3. 2번에 이어서 하나의 JS앱을 전송받아야 하므로 코드가 많아질 수록 로드 속드가 느려짐

1.5 Routing

• 주로 History API 혹은 URL Hash를 이용해 리로드 없는 페이지 전환을 구현
• window event를 활용하여 페이지 전환 등의 이벤트 핸들러를 등록
• react-router, reach-router등의 라이브러리가 존재

---

2. react-router

• Declarative routing for React
• React의 JSX를 이용하거나 History API를 사용하여 라우팅을 구현
• 웹에서는 react-router-dom을 사용
• 모든 path에서 같은 앱을 서빙하도록 해야함

2.1 기능

• React 컴포넌트를 특정 path와 연걸하면 해당하는 path로 진입 시 컴포넌트를 렌더링하게 함
• 조건에 맞지 않을 경우 redirect
• 페이지 이동 시 이벤트 핸들러를 등록함

2.2 컴포넌트

2.2.1 BrowserRouter

• HTML5의 History API를 사용하여 UI와 URL의 싱크를 맞춤
• 모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요
• 모든 path 앞의 basename을 지정할 수 있음
• forceRefresh로 페이지 이동 시 refresh할 것인지 지정할 수 있음.

2.2.2 Switch => Routes (v6)

• 여러 Route 중 매치되는 Route에서 처음 것을 렌더링함
• 매칭되는 Route가 없으면 아무것도 보여주지 않기 때문에 fallback용으로 페이지를 추가하는 것이 좋다.

2.2.3 Route

• path와 컴포넌트를 매칭
• 매칭되는 컴포넌트를 children으로 넣어주거나 prop으로 넘김
• exact 키워드로 정확하게 매칭하는 path를 설정함
• Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받음
• render prop으로 매칭되었을 때 어떤 컴포넌트를 렌더링할지 통제함

2.2.4 Redirect

• v6에서 deprecated 됌

<Route path='*' element={<NotFound />} />

• 다른 Route를 이용해 구현할 수 있음, 위 코드를 맨 하단에 위치시키면 앞선 경로들에 해당되지 않는 모든 경로를 핸들링할 수 있다.
• 렌더링 되면 to prop으로 지정한 path로 이동할 수 있음

2.2.5 Link, NavLink

• to prop을 특정 URL로 받아 클릭 시 네비게이션함
• anchor 태그 래핑
• NavLink의 경우 매칭 시 어떤 스타일을 가질지 등의 추가기능 존재