[TIL] MPA와 SPA / React Router(1)

MPA와 SPA

MPA란?

MPA(Multi Page Application)는 웹 서버와 브라우저가 여러 HTML 파일을 주고받는 방식이다.

 

웹 서버가 사용자들에게 제공해줘야 되는 모든 페이지들에 해당하는 HTML 파일을 가지고 있다.

 

브라우저에서 특정 주소를 갖는 페이지를 요청하게 되면 서버는 요청에 맞는 페이지를 찾아서 해당 페이지를 반환해주게 되고 브라우저는 서버로부터 받은 HTML 페이지를 그대로 화면에 렌더링하게 된다.

 

MPA 방식은 동작 방식이 매우 직관적이기 때문에 현재까지도 많은 서비스들이 이용하고 있는 전통적인 방식이다.

MPA의 단점

MPA 방식으로 개발된 웹 서비스들은 페이지 이동 시 이전 페이지와 이후 페이지에 공통으로 사용되는 요소가 있다고 하더라도 페이지 이동 시 원본을 전부 제거하고 새로운 HTML 파일로 페이지를 처음부터 다시 다 그려내기 때문에 화면이 깜빡이면서 새로고침 되는 등의 매끄럽지 않은 페이지 이동을 하게 된다. 또 페이지를 이동할 때마다 일일이 서버에 새로운 페이지 요청을 해야 하기 때문에 서버가 겪는 부하가 심해지게 된다.

 

 

이러한 이유 때문에 리액트는 MPA 방식을 따르지 않는다.

SPA

리액트는 SPA(Single Page Application)라는 MPA에 반대되는 방식으로 작동한다.

 

SPA 방식은 사용자가 처음 서버에 접속할 때 다양한 컴포넌트들로 구성된 1개의 HTML 파일을 웹 브라우저에 전송한다. 그리고 이 HTML 파일에 포함된 JS 코드가 동작하면서 사용자가 원하는 내용을 DOM 구조로 만들어 가면서 보여준다.

 

SPA 방식에서 CSR은 수많은 특정 컴포넌트를 찾아 화면에 보여준다. SPA 방식은 JS 코드가 동작하므로 데스크탑 앱을 사용하는 것처럼 느끼게 해주고 사용자가 보고 있는 컴포넌트가 바뀌어도 새로고침이 발생하지 않는다.

 

 

React Router

페이지 라우팅이란?

페이지 라우팅이란 사용자가 브라우저를 이용해서 웹 서버에게 해당 주소로 요청을 보내게 되었을 때 웹 서버가 요청에 따라서 브라우저에게 페이지를 반환해주고 브라우저는 반환된 페이지를 사용자가 볼 수 있도록 렌더링하는 과정이다.

 

 

React Router란?

리액트 라우터는 리액트 커뮤니티에서 가장 널리 사용되는 CSR 패키지다.

 

리액트 라우터는 컨텍스트 기반으로 설계되었으므로 컨텍스트 제공자인 BrowserRouter를 최상위 컴포넌트로 설정해야 한다.

 

BrowserRouter는 브라우저의 현재 주소를 저장하고 감지하는 역할을 한다. 그래서 리액트 앱의 모든 컴포넌트가 현재 브라우저의 주소를 불러와서 쓸 수도 있고 주소의 변화를 감지할 수 있게 된다.

 

src 아래에 리액트 라우터가 권고하는 routes라는 이름으로 폴더를 만들어서 페이지 컴포넌트를 넣는다.

 

경로로 요청이 들어오면 컴포넌트를 렌더링해주기 위해 Routes와 Route를 불러온 다음 App 컴포넌트의 최상위 태그를 Routes 컴포넌트로 설정하고 그 안에 자식으로 Route 컴포넌트를 배치한 다음에 props로 path에는 경로, element에는 해당 경로에서 렌더링하고자 하는 컴포넌트를 넣으면 된다.

 

만일 모든 경로를 element 속성에 설정한 컴포넌트로 라우팅하고 싶다면 path 경로에 “*”을 설정하면 된다.

 

import { Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import New from "./routes/New";
import Diary from "./routes/Diary";
import NotFound from "./routes/NotFound";

function App() {

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/new" element={<New />} />
      <Route path="/diary" element={<Diary />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default App;

 

 

출처 : 한 입 크기로 잘라먹는 React