SPA

Single Page Application

페이지 이동시 페이지 전체가 계속 렌더링되는 것은 사용자경험에 좋지 않은 영향을 끼친다. 속도가 저하되고, 과부하가 발생된다. 그래서 SPA라는 것이 생겼다. SPA에서는 중복되는 부분은 새로 불러오지 않고, 필요한 부분만 불러온다.
SPA에서 html은 비어있다. 자바스크립트 파일에 분산되어 각 부분을 불러온다. 처음 화면을 열면 자바스크립트 파일을 모두 읽어오기 때문에 첫화면 로딩시간이 길어질 수 있다. 그리고 검색엔진 최적화에 좋지 않다고 했으나 이 점은 개선되고 있다.

SPA로 페이지를 만들기 위해서는 컴포넌트를 효율적으로 잘 나누어야 한다. 이때, 프레임워크를 그려보기도 한다.

React Router

주소에따라 다른 뷰를 보여주는 과정을 Routing이라고 한다.
리액트에서 라우팅을 하는 방법

1. npx create-reacte-app myapp

2. cd myapp
3. npm start

4. npm install react-router-dom@^6.3.0

5. App.js 상단에 import

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
6. 컴포넌트 만들기

function Home() {return <h1>home</h1>;}

7. index.js에 import BrowserRouter

BrowserRouter는 react router dom의 상위 컴포넌트가 되어야 한다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

8. Routes, Route

Routes가 Route를 감싸야 한다.
경로는 path로 컴포넌트는 element로 연결한다.

<Routes>
  <Route path="/" element={<Home />} /> 
  <Route path="/mypage" element={<MyPage />} /> 
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

9. Link to 속성을 이용해 Route 컴포넌트에 설정한 path경로를 연결한다.

<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/mypage">MyPage</Link>
  </li>
  <li>
    <Link to="/dashboard">Dashboard</Link>
  </li>
</ul>

(+) useNavigate

1. useNavigate import
2. useNavigate() 함수 취득
3. navigate('/이동경로', {state: {key: value}})
   함수의 첫번째 인자에 이동경로, 두번째 인자의 state속성에 파라미터

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
<button onClick={()=> navigate(-1)}>뒤로가기</button>
<button onClick={()=> navigate(1)}>앞으로가기</button>