SPA(Single Page Application) : 서버로부터 페이지의 모든 부분을 받아오지 않고 중복되는 부분을 제외한 필요한 부분만 받아 페이지 업데이트
문법 및 중요
spa
장점 : 사용자와의 interaction에 빠르게 , 서버 과부하 줄어듦, 전체 페이지 렌더링 안해도되서 더 나은 유저 경험
단점 : js파일이 큼 = 첫 로딩이 긺 (html파일은 거의 비었고 대부분 코드가 js에 들어있음),
검색 엔진 최적화(SEO)가 좋지 않음 (html에 정보가 별로 없어서 검색 로봇이 동작못함)
wireframe : 디자인 전에 선을 이용해 윤곽선 잡는것
라우팅(Routing) : 주소에 따라 다른 화면 보이는거
React SPA에서 라우팅을 위해 React Router이라는 라이브러리 많이 이용
React의 주요 컴포넌트
: router 역할
: Switch와 함께 route matchers (경로 매칭)
: route changers (경로 변경)
import{BrowserRouter, Switch, Route, Link> from “react-router-dom”; // 이거로 import해와야함
1 react-router라이브러리 설치
npx create-react-app simpleroute // simpleroute 폴더에 React App설치
cd simpleroute
npm install react-router-dom // react-router 라이브러리 설치
2 App.js로 react-router 컴포넌트 꺼내오기 // js파일 최상단에 씀
import React from “react”;
import{BrowserRouter, Switch, Route, Link> from “react-router-dom”;
export default function App(){
return (…)
}
BrouwerRouter : 웹 애플리케이션에서 HTML5의 history API를 사용해 페이지 새로고침 안해도 주소 변경해주게끔
ReactDOM의 랜더 단계인 index.js에 넣어서 사용 가능 (BrowserRouter이 상위에 있어야지 Route 컴포넌트 사용가능)
index.js에 넣는 것
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(, document.querySelector('#root'));
컴포넌트는 여러 를 감싸서 경로 일치하는 하나의 라우터 렌더링 // 안쓰면 모두 렌더링
컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 지정. Link 컴포넌트가 정해주는 URL 경로와 일치해야 작동
경로를 연결해주는 컴포넌트 페이지 새로 안불러오고 HTML5 History API를 이용해 주소만 변경 // ReactDOM으로 렌더하면 컴포넌트는 태그로 바뀜 // 쓰는 이유는 쓰면 모든 페이지를 불러오기 때문에 link는 페이지 전환 방지
exact 쓰는 이유
이것을 안쓰면 home처럼 Link to = ‘/’인 경우 /로 시작하는 Route 컴포넌트를 모두 보여줌
물론 안쓰고 switch만 써서 할 순 있겠지만 순서와 위치를 잘 생각해야함
ex)