React SPA [TIL-20]

1. React SPA

Single Page Application

서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 
받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 
웹 어플리케이션이나 웹 사이트
SPA의 장점
1. 전체페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면되기
   때문에 사용자와의 Interaction에 빠르게 반응
2. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 과부하 문제가 현저하게
   줄어듬
3. 전체페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공

SPA의 단점
1. SPA의 경우 Javascript 파일의 크기가 큼 그렇기 때문에 Javascript
   파일을 기다리는 시간이 길어 첫 화면 로딩 시간이 길다.
2. 검색 엔진 최적화가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에
   있는 자료를 분석하는 방식으로 검색 기능을 구동함. SPA의 경우 HTML 파일은
   별다른 자료가 없기 때문에 검색엔진이 적절히 동작하지 못함

2. React Router

React SPA개발을 위한 라이브러리 Router

1. 라이브러리 설치
  - npm install react-router-dom => 터미널에 명령어 입력
2. 컴포넌트를 꺼내오기
  - App.js 내에 import 구문 입력
  - import {BrowserRouter, Switch, Route, Link} from "react-router-dom";
3. 라우트 준비하기
  - 표시할 페이지 컴포넌트 만들기
4. 주소에 따라 페이지 뷰 다르게 만들기
  - BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해
    페이지를 새로고침 하지 않고도 주소를 변경할 수 있는 역할을 함
  - Switch 컴포넌트는 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의
    라우터만 렌더링을 시켜주는 역할을 합니다.
  - Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를
    보여줄지 정함
  - Link 컴포넌트는 경로를 연결해주는 역할을 함. 페이지 전환을 통해 페이지를
    새로 불러오지 않고 애플리케이션을 그대로 유지하며, 페이지의 주소만 변경