React SPA

◎SPA(single page application)

‣React SPA

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

• 장점
  1. 필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 interaction에 빠르게 반응
  2. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어듬
  3. 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저 경험을 제공함
• 단점
  1. javascript파일의 크기가 크다.
  2. 검색엔진 최적화가 좋지 않다.검색엔진은 HTML파일에 있는 자료를 분석하는 방식으로 검색기능을 구동하는데 SPA의 경우 HTML파일은 별도로 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.
• Wireframe
  : 웹페이지의 레이아웃과 UI요소 등에 대한 뼈대, 선을 이용해 윤곽선을 잡는것
  -mockup: 데모 시연, 평가를 위한 최소한의 기능만 담은 모형
  => 페이지를 먼저 만들기 보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상부터하자!
  => 컴포넌트들이 보다 유기적으로 주고받을수 있도록 설계하자!

---

◎React Router

=> 라우팅을 위해 사용하는 라이브러리
-routing
: 다른 주소에 따라 다른 뷰를 보여주는 과정을 ‘경로에 따라 변경한다’라는 의미

• react router의 컴포넌트
  -라우터 역할의 browserRouter
  -경로의 매칭역할의 Routes와 Route
  -경로 변경 역할의 Link
• React-router 사용 환경 세팅

1. react router 라이브러리 설치
   npm install react-router-dom@^6.3.0
2. App.js로 react-router 컴포넌트 꺼내오기
   import {BrowserRouter,Routes,Route,Link} from "react-router-dom"