React-router로 SPA 개발

SPA란?

Single Page Application → 페이지가 1개인 어플리케이션
전통적인 페이지는 여러 페이지로 구성
- 유저가 요청할때마다 페이지 새로고침
- 페이지 로딩때마다 서버에서 리소스를 전달 받아 해석 후 렌더링
- HTML 파일 or 템플릿 엔진등을 사용한 뷰를 어떻게 보일지도 서버에서 담당
- 전통적인 구조는 웹에서 제공하는 정보가 많아지면서 속도 문제 발생. 이를 해소하기 위해 캐싱과 압축을 제공하나 사용자와 상호작용이 많은 모던 웹 브라우저는 충분하지 않을 수 있다. 서버에서 렌더링을 담당하는 것은 서버자원을 사용하는 것을 의미 → 불필요한 트래픽 낭비
리액트 같은 라이브러리 또는 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저에게 담당하도록 하고 필요한 데이터만 전달 → SPA

최초 호출시에만 서버가 페이지를 제공.
나머지 페이지들은 브라우저가 정의.
다른 페이지로 이동 할 때는 서버에서 필요한 데이터만을 받아 브라우저가 다른 종류의 뷰 정의
웹 앱을 만들려면 여러 화면이 있어야 하는데 화면에 따라 주소도 정의 해야 한다.
- 주소에 따른 다른 뷰를 보여주는 것을 라우팅이라고 한다. React 자체 기능은 없고 react router 라이브러리를 사용해야 한다.

싱글 페이지 애플리케이션의 단점은 페이지 로딩 속도가 지연될 수 있다.
로딩 속도가 지연되는 이유는 자바스크립트 번들 파일에 모든 애플리케이션의 로직을 불러오므로 규모가 커지면서 용량도 커진다. → 이 문제는 코드 스플리팅(code spliting)으로 해결