<aside> 📌 요약: SPA를 활용하면 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱 가능. 매번 페이지 요청이 불필요하여 네트워크 요청이 감소. 단점은 SEO(Search Engine Optimization)에 불리함. 하나의 JS앱이 지속하므로 메모리관리, 성능, 데이터활용 등이 중요 하나의 거대한 JS 앱을 전송받아야 하므로 코드가 많을수록 첫 로딩 속도가 느림.
SPA에서 라우팅은 History API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현함. history, location 등 HTML5 API를 활용. 페이지 전환 시 이벤트 핸들러 등록 가능. react-router 등의 라이브러리 활용하여 라우팅 쉽게 가능.
react-router는 리액트에서 선언적으로 라우팅을 구현하는 라이브러리. 웹에서는 react-router-dom을 사용 명령적(Imperative) 라우팅은 history API로, 선언적(Declareative) 라우팅은 JSX로 구현.
URL parameter를 얻어 활용 가능.
<BrowserRouter>, <Route>, <Link>, <Switch> 등을 활용하여 라우팅 구현.
react-router를 응용하여 Private Route(특정 조건이 충족되지 않았을때 Redirect 등)를 만들거나 query string 활용 등 가능.
</aside>