Unit5 - [React] React SPA

🔥 React SPA

MPA(Multiple Page Application) : 페이지 이동마다 전체 HTML을 받아오는 방식 (예전 방식)

SPA (Single Page Application)

: 서버로부터 완전히 새로운 페이지를 불러오지 않고, 업데이트가 필요한 부분의 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트

SPA 장점

• 전체 페이지가 아닌 필요한 부분의 데이터만 받아서 업데이트 하기 때문에 사용자와 Interaction에 빠르게 반응
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부화 문제가 현저히 줄어듬
• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 UX 제공

SPA 단점

• JavaScript 파일의 크기가 커서, JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어짐
• 검색 엔진 최적화(SEO)가 좋지 않음
  (HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함, 그러나 이 단점은 점점 사라지고 있는 추세)

- 와이어프레임(Wireframe)

: 선(wire)를 이용해 윤곽선(frame)을 잡는 것 => 웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대

- 목업(Mockup)

: 데스크롭, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인 한 것
=> 데모 시연, 평가를 위한 최소한의 기능만 담은 모형

---

🔥 React Router

React SPA에서 라우팅을 위해 React Router라는 라이브러리 가장 많이 사용
라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정 => 경로에 따라 변경

• react-router 라이브러리 설치

npm i react-router-dom

React Router 주요 컴포넌트들을 사용하기 위해선 React Router 라이브러리에서 아래와 같이 불러와야함

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

React Router 주요 컴포넌트

<BrowserRouter> : 라우터 역할, 가장 상위에 작성되어야 함

<Routes>, <Route> : 경로 매칭

- <Routes> : 여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할
- <Route> : path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정한다.

<Link> : 경로 변경

(페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경)

ReactDOM으로 렌더시키게 되면 <Link> 가 <a> 로 바뀐다.

• React Router에서 <a>가 아닌 <Link>를 사용하는 이유
  - <a>는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링
  => 새로고침 현상 발생
  - <Link>는 페이지 전환을 방지하는 기능이 내장되어 있어 SPA 구현 가능