React SPA/Router

React SPA(Single-page application, SPA)

 

하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드

페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다.

-> 한번 페이지 전체를 로딩 후 사용 할 부분만 작동을 하게 한다.

 

장점과 단점

장점

-전체 페이지를 계속 불러올 필요가 없기 때문에 사용자 interacation에 빠르게 반응

-서버에서 받은 사용하는 부분의 요청 데이터만 넘겨주면 되기 때문에 서버 과부하가 줄어듬

 

단점

-Javascript 파일이 크기 때문에 첫 화면 로딩이 시간이 걸린다.

-검색엔진 최적화 (SEO)에 맞지 않는다. 보통 SEO는 HTML의 자료를 불러오는데 SPA는 특성 상 HTML이 거의 비어있다.

(하지만 이 단점은 점점 사라지는 중)

 

Wireframe

 

 

 사진과 같이 다양한 컴포넌트 들의 집합체 , 토대

즉 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획

데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계

 

React Router

다른 주소에 따라 다른 뷰를 보여주는 과정

내장되어 있지 않기 때문에 별도의 설치 필요

 

 

 

//App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './pages/Header';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Board from './pagres/Board';

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header />
                <Link to={'/'}>Home</Link>
           		<Link to={'/board'}>Board</Link>
           		<Link to={'/profile'}>Profile</Link>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/profile" element={<Profile />} />
                    <Route path="/board" element={<Board />} />
                </Routes>
            </div>
        </BrowserRouter>
    );
}

 

BrowserRouter

브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할

<BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용

Routes

자식 route들을 구성하고 있는 단위

Route

path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 지정. <Link to="">으로 할당

Link

경로를 연결해 주는 역할을 하는 컴포넌트

페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 페이지의 주소만 변경

 

추가로 배운 것

 

useNavigate

 

양식이 제출되거나 특정 event가 발생할 때,  url을 조작할 수 있는 interface를 제공

 

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

navigate("../success",  { replace: true});

// replace (true or false)
// true를 사용한다면, navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않는다. 
// 이 때는 자신의 메인 페이지 ("/")로 돌아오게 된다. 
// false는 뒤로가기가 가능하며 이 것이 기본 값

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