Chapter1. React SPA

Chapter2. React Router

---

Chapter1. React SPA

Single Page Application

서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

SPA 등장 배경

전통적인 웹사이트에선 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다 ->
문제1) 이때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시킴
문제2) 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게됨

장점

1. 페이지 전체가 아닌 필요한 부분만 업데이트 하기 때문에 사용자의 행동에 빠르게 반응함
2. 서버 입장: 요청받은 데이터만 넘겨주면 되므로 과거와 같은 과부하 문제도 줄일 수 있음
3. 사용자 입장: 화면 전체를 새로 렌더링할 필요가 없으므로 더 나은 유저경험을 제공

단점

1. JS 파일 크기가 크다. 그래서 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다
2. 검색 엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구현하지만 SPA의 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함

---

Wireframe : 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것
목업(mockup) : 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것

---

Chapter2. React Router

경로에 따라 다른 뷰를 보여줄 수 있다.
다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.

React Router 주요 컴포넌트

1. BrowserRouter : 라우터 역할

React Router DOM이 사용되는 부분의 상위 컴포넌트로 위치해야 함

2. Routes 와 Route : 경로를 매칭

Route 컴포넌트는 Routes 컴포넌트의 자식 컴포넌트가 되어야 함

3. Link : 경로를 변경

Link 컴포넌트를 클릭하면 Route의 path와 일치하는 페이지로 이동