[React][Codestates] React SPA & Router

간단하게 오늘 배운 lesson 내용을 정리해 보았다.

React SPA

Achievement Goals

• SPA(Single-page Application) 개념을 이해하고 설명할 수 있다.
• SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.

SPA

SPA란?

SPA(Single Page Application
: 페이진 갱신에 필요한 데이터만 입력받아 현재 페이지의 정보를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션 또는 사이트를 말한다.

• 전통적인 웹사이트는 사용자의 요구가 있을 때마다 페이지 전체를 로딩한다. --> "깜빡인다" 라고 표현한다.
• SPA는 업데이트가 필요한 부분만 새로 불러온다(중복되는 부분은 불러오지 않는다)
• 전톡적인 방식은 사용자가 많아지고 웹사이트가 복잡할수록 사용자와 서비스 사이의 상호작용이 증가하게 되고 트래픽 증가와 사용자 경험의 저하를 야기한다.
• JavaScript가 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 방식 --> SPA
• Facebook, Youtube, Netflix 등이 SPA 방식으로 제작되어 있다.

SPA의 장점

• 사용자와의 Interaction이 빠르다. (필요한 부분만 갱신하므로)
• 서버 과부하 문제가 줄어든다 (요청받은 데이터만 전송하므로)
• 더 나은 사용자 경험 제공 (전체를 렌더링하지 않으므로)

SPA의 단점

• SAP의 경우 JavaScript 파일의 크기가 크기 때문에 첫 로딩 시간이 길어진다.
• 검색 엔진 최적화(SEO)가 좋지않다. (검색 로봇은 자료를 수집할 때 웹페이지의 URL , HTML 내의 각종 태그나 링크 등을 분석하므로 SPA의 HTML은 적절하지 못하다 -->) 물론 이에 대응하기 위해 검색 엔진이 발전하고 있는 추세라고 한다.

Wireframe

• wireframe : Web page의 layout과 UI요소 등에 대한 뼈대 --> 디자인 전 단계이며 이를 통해 디자인 컨샙과 사이트 기능에 대한 이해를 할 수 있다.
• Mockup : 데모 시연, 평가를 위한 최소한의 기능만 담은 모형 --> 직관적으로 이해하기 쉽게 디자인한 것.
• 어떤 component를 만들고 이들을 조합할지를 먼저 구상해야한다.

React Router

Achievement Goals

• React Router DOM을 이용하여 SPA를 구현할 수 있다.
• Routing 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.
• React Router

Routing 이란 다른 주소에 따라 다른 뷰를 보여주는 것을 말한다. 경로에 따라 변경한다 라는 의미이다.

React SPA에서는 라우팅을 위해 React Router 라이브러리를 가장 많이 사용한다.

React Router의 활용

React Router의 주요 컴포넌트는 3가지로 나뉠 수 있다.

1. router (라우터 역할) :
2. route matchers(경로 매칭) : ,
3. route changes (경로 변경) :

import {BrowserRouter, Switch, Route, Link} from "react-router-dom"으로 router 라이브러리를 불러온다.

React Router 사용 환경 세팅

1. npm 명령어로 react-router 라이브러리를 설치한다
2. npm install react-router-dom
3. App.js로 react-rourer 컴포넌트를 꺼내온다

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

  export default function App(){

  return (...)

  }