[React] SPA(Single Page Application) 만들기

MPA(Multiple Page Application)

: 페이지마다 새로운 html을 받아와 화면에 보여주는 방식(깜빡인다고 표현함)

웹사이트가 복잡해지고 애플리케이션 형태를 가지게 되면서

사용자와 서비스 사이의 상호작용이 많아지고

트래픽 증가, 느린 반응성으로 사용자 경험의 저하를 야기시킴

(Header, Navigation Bar 등 중복되는 요소들을 매번 불러오는 것은 불필요한 트래픽 발생시킴)

SPA(Single Page Application)

: html 문서 전체가 아니라 필요한 데이터만 받아 업데이트하는 방식

 

업데이트에 필요한 데이터만 서버에서 전달받아 동적으로 HTML요소를 생성해서 화면에 보여주는 방식

JS와 historyAPI를 이용해 구현할 수 있는데

이를 쉽게하도록 도와주는 라이브러리가 react-router-dom

 

SPA 장점

1. 사용자와 상호작용이 빠름

2. 서버 과부하 문제가 줄어듦

=> 더 나은 유저경험 제공

ex) 유튜브, 페이스북, 구글, 에어비앤비, 넷플릭스

 

SPA 단점

1. JS파일 크기가 커서 첫 화면 로딩 시간이 긺

(대부분의 코드가 JS파일에 들어있기 때문에 html은 거의 비어있음)

2. 검색엔진최적화(SEO)가 좋지 않음

검색엔진들은 HTML파일의 태그나 링크를 분석하는 방식으로 검색 기능 구동

검색엔진최적화에 대한 대응책 마련

-> SPA 검색엔진최적화를 위해 검색엔진이 발전하고 있어서 이 단점은 없어지는 중임

3. 앱 내에서 앞으로 가기, 뒤로 가기 등 상태 관리에 주의 필요

-> 개발 복잡도가 늘어남

 

 

create-react-app, react-router-dom 이용하여 간단한 SPA 만들기

1. 라이브러리 설치

npx create-react-app@latest simpleroute

npm install react-router-dom@^6.3.0

* Semantic Versioning 틸드(~), 캐럿(^) 참고

 

아래부터 routing 주소에 따라 다른 뷰를 보여주는 과정

2. react-router-dom을 사용하기 위한 기본 설정(BrowserRouter)

// index.js

// 라이브러리 불러오기
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

// React Version 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);    

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

BrowserRouter

: History API를 이용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해 줌

 

3. 페이지 이동(주소창 path 변경) 시 보여질 컴포넌트 설정(Routes, Route)

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";

import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
import About from './Pages/About';

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <main>
          <Sidebar />          
          <Routes>
            <Route path="/" element={<Tweets />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
};

export default App;

Routes

여러 Route 컴포넌트를 감싸고, 그중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜줌.

불러오고 싶은 자리에 위치시킴

Routes로 감싸지 않는다면 매칭되는 모든 요소를 렌더링

 

Route

path 속성을 지정하여 주소(경로) 설정, 해당 주소에서 보여줄 컴포넌트를 element 속성으로 지정한다

path="*"와 element로 의도하지 않은 페이지에 접근할 경우 제어할 수 있음 

 

4. 주소(path)를 바꿔줄 메뉴 만들기

const Sidebar = () => {
  return (
    <section className="sidebar">
      <Link to="/about">
        <i className="far fa-question-circle"></i>
      </Link>
    </section>
  )
}

Link

경로를 연결해 주는 역할. 페이지 전환을 방지하는 기능이 내장

a 요소는 페이지를 새로 불러옴(처음부터 다시 렌더링= 새로고침)

 

useNavigate

함수 내부에서 주소를 바꿔야 할 때 사용

특정 행동을 했을 때 해당 주소로 이동시켜 주는 역할

function MypageForm() {
  let navigate = useNavigate();

  function handleClick() {
    if(로그인 한 상태) {
        navigate('/mypage');
    } else {
        navigate('/login');	
    }
  }

  return <button onClick={handleClick}>마이페이지</button>;
}

let navigate = useNavigate()

// 뒤로 가기
navigate(-1)
// 앞으로 가기
navigate(1)
// 새로고침
navigate(0)

(참고 historyAPI)

// 뒤로 가기
history.back()
history.go(-1)

// 앞으로 가기
history.forward()
history.go(1)

// 새로고침
history.go(0)

 

5. 라우트(Route)에 연결할 컴포넌트 만들기

- 컴포넌트, 변경할 화면

const About = (props) => {
  return (
    <section className="aboutTwittler">
    // 생략
    </section>
  )
}

 

 

 

 

22.11.28

코스 S2U5