[React Router] 라우터 사용하기(react-router-dom v5)
1. SPA와 라우터의 관계 • SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다. • MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고, 여러 페이지 간의 스타일, 컴포넌트를 재활용하여 구현한다. • 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된며, 서버로 부터 데이터만 받아온다. SPA의 기술적 장점 • 서버에서 페이지를(서버 랜더링) 만들 필요가 없으므로 CDN에 캐싱이 가능하다. • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다. • 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다. • ..