23.01.25 - React SPA, React Router

1. React SPA

 

1) MPA vs SPA

MPA(Multiple Page Application)

페이지마다 새로운 html을 받아와 보여주는 양식이다. 누를때마다 깜빡이고 서버에서 html을 받아오는 시간이 소요된다. 

 

SPA(Single Page Application)

서버로부터 완전한 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하여 사용자와 소통하는 웹 애플리케이션이나 사이트. 

 

사용자가 다른 페이지로 이동할 때

MPA : html로 된 페이지 전체를 불러옴으로 페이지 전체가 새로 로딩되며 깜빡이게 된다.

SPA : 메뉴나 푸터 등 페이지 전환 전후에 중복되는 부분은 제외하고 변경해야 하는 부분만 새로 불러오게 된다. 

 

웹사이트가 복잡해지고 애플리케이션의 형태를 갖게 되면서 사용자와 서비스 사이에 더 많은 상호작용이 발생하게 되었다. 하지만 MPA 방식으로는 중복되는 요소들을 매번 새로 불러와야함으로 서버에 불필요한 트래픽이 발생했고, 사용자 입장에서도 더 느린 반응성을 갖게 되어 좋은 사용자 경험을 제공하기 어려워졌다. 

=> 필요한 데이터만 서버에서 전달받아 자바스크립트가 동적으로 html 요소를 생성해 화면에 보여주는 방식 => SPA

 

2) SPA의 장단점

장점	단점
- 전체 페이지가 아닌 필요한 부분의 데이터만 받아서 화면을 업데이트 함 => 사용자와의 상호작용에 빠르게 반응함 - 서버에서 요청받은 데이터만 넘겨줌으로 서버 과부하 문제 줄어듬 - 전체 페이지를 렌더링 하지 않음으로 더 나은 사용자 경험 제공	- 자바스크립트 파일의 크기가 크기 때문에 첫 화면 로딩시간이 길어짐* - 검색엔진 최적화(SEO)가 좋지 않음**

* 브라우저는 첫 화면이 로딩될때 html 파일을 읽고 내부의 script 요소 안의 자바스크립트 파일을 다시 받아옴. 하지만 SPA의 경우 html 파일은 거의 비어있고 대부분의 코드가 스크립트 파일 안에 들어있기 때문에 자바스크립트 파일이 무거워지게 된다. 

** 검색엔진 최적화(SEO) : 검색엔진이 자료를 수집하기 좋게 웹페이지를 구성하는것.

검색로봇은 html 내의 각종 태그, 링크 등을 분석해서 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹페이지들을 순서대로 보여주는 방식으로 작동함. 

그러나 SPA의 경우 html이 거의 비어있기 때문에 검색로봇이 적절하게 동작하지 못한다. 

=> 검색엔진 최적화에 대한 대응책을 따로 마련해야 하지만, SPA에서도 검색엔진 최적화에 대응할 수 있도록 검색엔진이 발전하고 있다. 

 

3) 주의점

SPA를 설계할때는 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들 끼리 보다 유기적으로 주고받을 수 있게 설계해야 한다. 

요소가 한번만 만들어서 모든 페이지에서 사용할 수 있게 로직을 짜야하는 컴포넌트인지, 여러번 재사용이 가능하도록 로직을 짜야하는 컴포넌트인지 잘 생각해서 내용을 설계해야한다. 간단하게 와이어 프레임을 그려서 기능을 구상해보면 조금 더 쉽게 판단할 수 있다. 

 

 

2. React Router

React SPA는 경로에 따라 다른 뷰를 보여주어야 한다. 이는 React Router 라이브러리를 사용함으로서 가능하다. 

SPA는 하나의 페이지를 갖고 있지만 한 종류의 화면만 사용하는 것이 아니고 화면에 따라 주소도 달라져야한다. 

=> 다른 주소에 따라 다른 뷰를 보여주는 과정(=경로에 따라 값을 변경한다) => 라우팅(Routing)

 

단 리액트 자체에는 라우팅 기능이 없기 때문에 라이브러리를 사용해야 한다. 

 

1) 사용방법과 주요 컴포넌트

(1) 라이브러리 설치

$ npm install react-router-dom

 

(2) 모듈 불러오기

import { BrowserRouter } from 'react-router-dom'

위와 같이 import를 사용하여 모듈을 불러올 수 있다. 

 

(3) BrowserRouter

웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. 

가장 상위에 작성되어 있어야 React Router의 컴포넌트를 사용할 수 있다. 보통은 자바스크립트 렌더링이 시작되는 index.js 파일에 다음과 같은 형태로 넣어준다. 

 

BrowserRouter가 시작점에 위치하지 않으면 useNavigate 등이 오류가 생길 수 있다. 

index.js는 자바스크립트 렌더링이 시작되는 부분이기때문에 여기서 App 컴포넌트를 감싸주면 App 컴포넌트를 비롯한 하위 컴포넌트에 라우터를 모두 적용시킬 수 있다. 

 

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>
);

* React.StrictMode : 리액트 엄격모드. 설정시 렌더링을 무조건 한번 더 하게 된다(문법의 오류를 잡기 위해 내부적으로 한번 더 실행하게 됨)

 

(4) Routes / Route

Routes

여러 Route 컴포넌트를 감싸서 경로가 일치하는 단 하나의 라우터에만 렌더링을 시킨다. 

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

 

Route

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

Link 컴포넌트가 정한 URL 경로와 일치하는 경우에만 작동한다. 경로는 path로 컴포넌트는 element로 연결해준다. 

<Route path="주소규칙" element={<보여줄 컴포넌트 />}>

 

예시)

import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profile from './Profile';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

 

(5) Link

경로를 연력해주는 컴포넌트. 페이지 전환을 통해 페이지를 새로 불러오는 것이 아닌, 애플리케이션을 그대로 유지하면서 페이지의 주소만 변경해준다. ReactDOM으로 렌더링 될때 a 요소로 변경된다. 

a 요소는 페이지를 전환할때 새로고침 현상이 발생하지만 Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 Link 컴포넌트를 사용해 SPA를 구현한다. 

to 속성을 사용해 Route 컴포넌트에 설정한 path 주소와 연결해준다. 

<Link to="/">홈</Link>

 

 

 

*************************

 

요약 & 일일회고

 

- SPA는 Single Page Application의 약자이다. SPA는 페이지가 변경될때 전체 페이지를 불러오는 것이 아니라 업데이트가 필요한 부분의 데이터만 받아와서 자바스크립트를 통해 변경된 부분만 수정하여 다시 보여준다. 

- SPA의 장점은 서버에 불필요한 트래픽이 감소하고, 좋은 사용자 경험을 제공하고, 사용자와의 상호작용에도 빠르게 반응한다. 단점은 자바스크립트 파일이 너무 무거워지기때문에 처음 페이지가 로딩될때 시간이 많이 걸린다는 것과 검색 최적화에 불리하다는 점이다. SPA는 html이 거의 비어있기 때문에 검색 로봇에게 많은 자료를 제공하지 못한다. 다만 이점은 검색엔진이 발전하고 있다. 

- 와이어프레임을 통해서 이 컴포넌트가 한번만 만들어서 모든 페이지에서 사용하도록 해야할지, 디테일이 다르더라도 기능과 구조가 동일해서 여러번 재사용이 가능하도록 로직을 짜야하는지 판단할 수 있다. 

 

- React Router는 SPA를 리액트로 구현할때 사용하는 라이브러리이다. 다른 주소에 따라 다른 뷰를 보여줄 수 있다.(=라우팅)

- npm install react-router-dom 명령어를 사용해 라이브러리를 리액트 프로젝트에 설치할수있다. 

- index.js 등 최상위 컴포넌트에 BrowserRouter 컴포넌트를 적용하고, Routes 컴포넌트의 하위 컴포넌트 들로 Route를 사용한다. Route는 특정한 경로(=주소)가 되었을때 보여줄 컴포넌트를 각각 path와 element로 지정할 수 있다. 또한 Link 컴포넌트를 통해서 해당하는 주소로 이동할 수 있도록 만들어줄수있다. to 속성을 이용해 경로를 지정해준다. 

 

 

***

 

SPA랑 라우터... 역시 요약해보는게 도움이 많이 되는것같다. 오늘 공부한 내용을 보지 않고 스스로 정리해보면서 내가 얼마나 알고있는지를 점검해 볼수 있어서 좋다. Route는 오늘 과제를 만들어보면서 조금 익숙해졌는데 어떤 컴포넌트를 어떻게 구현할지는 조금 서툰것같다. 이 컴포넌트를 한번만 만들어서 쭉 사용할지, 여러번 재사용할 수 있도록 짤지는 아직 잘 모르겠다. 자잘한 프로젝트에 도전해봐야겠다.