SPA(Single Page Application)

SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고, 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.
처음 HTML 페이지를 하나 불러온 다음, 이후 페이지들은 JS로 로드한다.

SPA의 장점

1. 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응한다.
2. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
3. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

SPA의 단점

1. 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일안에 들어있다보니 JS 파일이 무거워진다. 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.
2. JavaScript를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 수집하지 못한다. 따라서 검색엔진의 결과에 나타나지 않을 수 있다.

React 에서 컴포넌트를 어떻게 나누어야 할까 ?

Presentational and Container Components
presentational & container 디자인 패턴

React ROUTER

라우팅(Routing) - 다른 주소에 따라 다른 뷰를 보여주는 과정. "경로에 따라 변경한다."

React Router 주요 컴포넌트

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Switch 와 Route, 그리고 경로를 변경하는 역할을 하는 Link.

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

React Router 사용 환경 세팅

1. react-router 라이브러리 설치

$ npm install react-router-dom

2. react-router 컴포넌트 import

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";