리액트 SPA 간단정리

 

SPA의 등장 배경, 개념, 장단점

왜 등장했을까? - MPA가 불편해

1. 전통적인 웹사이트(Multi Page Application)는 이벤트 발생시 혹은 페이지 전환시 페이지 전체를 불러왔다.
   1. 페이지 이동시 화면이 깜빡이고
   2. 전부 렌더링될 때 까지 기다려야한다.
2. 하지만 웹사이트가 복잡해지고 애플리케이션의 형태를 가지며 사용자와 서비스간 상호작용이 증가했다.
3. 중복되는 요소(네비게이션 바)들을 상호작용시마다 불러와 불필요한 트래픽 발생시켜 유저가 느린 서비스를 경험하게 했다.
4. AJAX(비동기)를 이용해 어느정도 이런 문제를 해결할 수 있었지만, 페이지 새로고침은 해결이 안됐다.

SPA?

Single Page Aplication

화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아, 브라우저에 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말함

장점

• 전체페이지를 로드하는게 아니기때문에 반응성 ⬆️
• 트래픽 과부하 ⬇️

단점

• 대부분의 코드가 JavaScript 파일안에 있다보니 첫 화면 로딩시간이 길다
• 검색 엔진 최적화가 좋지않다.
  • 검색봇이 웹페이지의 HTML 문서 내 태그나 링크 등을 분석하는데 SPA는 HTML이 거의 비어있어 충분한 자료 수집이 어렵다.
  • 검색 엔진자체에서 SPA 최적화 대응중이라 점차 이 단점은 사라지고 있다.

컴포넌트를 어떻게 나누어야 할까?

wireframe

• 디자인에 들어가기 전 단계
• 선(wire)를 이용해 윤곽선(frame)을 잡는 것 / 뼈대

mokeup(목업)

• Desktop이나 스마트폰의 프레임을 덧씌워 이해하기 쉽게 디자인한 것
• 데모나 시연 및 평가를 위한 최소한의 기능을 담은 모형

React Router

Router는 언제 사용해야할까?

SPA는 하나의 페이지만 가지고 있지만 그게 한 종류의 화면만 사용한다는 뜻은 아니다.

    인스타그램의 예

        홈화면: 스토리와 게시글이 나와있는 화면

        검색화면: 검색창과 다양한 추천게시물

        릴스화면: 릴스와 카메라 버튼

 

위와 같은 다양한 화면들에 따라 주소도 달라지는데

이렇게 다른 주소에 따라 다른 화면을 보여주는 과정을 라우팅(Routing)이라고 한다.

** Routing : 경로에 따라 변경한다

하지만 React 내장기능에 포함되어 있지 않기 때문에 “React Router”라는 라이브러리를 사용해야 한다.

 

React Router의 주요 컴포넌트

종류

크게 세 가지로 나뉜다.

라우터 역할

<BrowserRouter> : History API를 사용하여 UI를 URL과 동기화된 상태를 유지

    ** 초간단 History API

    history.back(), history.go(-1) - 페이지 뒤로

    history.forward(), history.go(1) - 페이지 앞으로

    history.go(0) - 새로고침

경로를 매칭해주는 역할

<Routes> : 여러 <Route>컴포넌트를 감싸 경로가 일치하는 단 하나의 라우터만 렌더링 시킴

    ** Routes를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

<Route> : path속성을 지정, 해당 path에서 어떤 컴포넌트를 보여줄지 정한다.

    ** <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동함

<Routes>
  <Route path="/" element={<Home />} />  최상위 경로를 지정 ex https://naver.com/
Home 컴포넌트를 연결
  <Route path="/about" element={<About />} /> /about경로(https://naver.com/about)
About 컴포넌트 연결
  <Route path="/mypage" element={<MyPage />} /> (https://naver.com/mypage) 
MyPage 컴포넌트 연결
</Routes>

경로를 변경하는 역할

<Link> : 사용자를 원하는 경로로 이동시킴

<Link to="/">Home</i></Link>

Router 사용해보기!

1. create-react-app으로 React 프로젝트 생성

npx create-react-app@latest new-router-test // new-router-test라는 프로젝트,폴더 생성
cd new-router-test
npm start // 잘 생성됐나 테스트

2. React Router 라이브러리 설치

npm install react-router-dom
또는
npm install react-router-dom@^6.4.1 // >> 버전을 특정하는 것이 가능하다

package.json파일에 들어가서 dependencies항목에서 “react-router-dom” 라이브러리 확인

 

3. 사용하려는 파일내 최상단에 각 컴포넌트를 설치된 라이브러리에서 불러옴

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

4. BrowserRouter 컴포넌트 사용

import { BrowserRouter } from "react-router-dom";
** 밑에서 BrowserRouter 컴포넌트를 사용하고 싶으면 꼭 import 해야 작동함!

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
        </nav>
      </div>
    </BrowserRouter>
  )
}

** 이런식으로 BrowserRouter가 상위에 작성되어 있어야 React Router의 컴포넌트 사용 가능

 

** 그런데 위의 예처럼 app.js에 사용하는 것보다 ReactDOM의 렌더 단계인 index.js에 사용하는게 훨씬 안정적

React 버전 17기준

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

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

React 버전 18기준

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

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

<BrowserRouter>컴포넌트는 웹 어플리케이션에서 HTML5의 History API를 사용, 페이지를 새로고침하지 않아도 주소를 변경할 수 있게 해준다.