리액트, SPA, 리액트 라우터, React Router

---

React SPA 

 

SPA의 등장 배경과 개념

 

전통적인 웹사이트들은 페이지 이동 시 매번 '페이지 전체'를 불러와야 했다.
-> 모든 페이지들은 매번 다시 불러오면 느린 반응성을 갖게 되고, 트래픽 증가와 사용자 경험의 저하를 일으켰다.

SPA는 업데이트 시 전체를 다시 불러오지 않고 업데이트가 필요한 부분만 새로 불러온다.

문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML요소를 생성해서 
화면에 보여주는 방식이 개발되었다. (1990년대 후반에 개발)

 

SPA (Single Page Application)

 

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

 

장점 

 

전제 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 
사용자와의 interaction에 빠르게 반응한다.

서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.

전제 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

대표적인 서비스로 Youtube, Gmail, AirBNB, Netflix 등 이 있다.

 

단점

 

SPA의 경우 JavaScript 파일의 크기가 크다. 무겁다.

이 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.

검색 엔진 최적화(SEO)가 좋지 않습니다. 

구글이나 네이버 같은 검색 엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다.

하지만 SPA의 경우, HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.

다만, SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어, 점차 이 단점은 사라지고 있는 추세다.

---

 

Wireframe  

 

기본 개념

 

Wireframe은 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말한다.

: 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대

 

목업(mockup)은 데스크탑, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다.

: 데모 시연, 평가를 위한 최소한의 기능만 담은 모형

 

Wireframe을 잡는 방법

 

페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립한다.

컴포넌트가 UI 의 필수 요소란 정의도 맞고, 각자 고유의 기능을 가지고 있다는 정의도 맞다.
하지만 조금 더 고차원의 React 개발을 원한다면, 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고 받을 수 있도록 설계해야 합니다.

React Router와 함께 컴포넌트 활용을 할 수 있다.

---

 

React Router  (라우팅을 위한 라이브러리) 

 

SPA & Routing

 

SPA는 하나의 페이지를 가지고 있지만, 사실 한 종류의 화면만 사용하지 않는다.

예를 들어, 유튜브와 같은 SPA를 만들 때, 컨텐츠 모음 페이지, 알림 페이지, 마이 메뉴 페이지 등의 화면이 필요하다.

또한 이 화면들에 따라서 "주소"도 달라지고
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."는 의미로 라우팅(Routing)이라고 한다.

But ! React 자체에는 이 기능이 내장되어 있지 않아, 우리가 직접 주소마다 다른 뷰를 보여줘야 한다.

 

React Router 활용

 

React Router의 주요 컴포넌트 3가지 

 

라우터 역할을 하는 BrowserRouter <BrowserRouter>

경로를 매칭해주는 Switch와 Route <Switch>, <Route>

경로를 변경하는 역할을 하는 Link <Link>

다음 명령어를 통해 이것들을 사용 가능하다. 
import {BrowserRouter, Switch, Route, Link} from "react-router-dom"

 

React Router 사용 환경 세팅

 

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

   // 터미널에 입력
   // someroute 폴더에 React App 설치
   npx creat-react-app someroute
   cd someroute
   // react-router 라이브러리 설치
   npm install react-router-dom@5.3.0​

2. App.js로 react-router 컴포넌트 꺼내오기
   
    
   

   // App.js의 최상단 목록 아래에 입력
   import { BrowserRouter, Switch, Route, Link } from "react-router-dom";​

---