SPA(Single Page Application)vs MPA(Multi Page Application)

Single Page Application(SPA)

싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 매번 불러오지 않고, 현재의 페이지를 동적으로 작동하게 함으로써 사용자에게 웹사이트를 제공하는 것을 말한다.

 

Multi Page Application(MPA)

웹사이트의 인터렉션이 발생할 때마다 서버로부터 새로운 페이지를 불러와 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹사이트 제공 방식을 말한다.

 

 

- 전통적인 MPA는 새로운 페이지 요청 시마다 리소스를 다운로드하고, 전체 페이지를 다시 렌더링하기 때문에 비효율적이다. 그렇기 때문에 최근에는 리렌더링이 필요하지 않고 효율적인 SPA를 많이 사용한다. 

 

SPA는 웹사이트에 필요한 모든 정적 요소를 처음 불러올때 한번만 다운로드한다. 웹 페이지 간 이동 시, 페이지 로딩에 필요한 데이터만을 JSON형식으로 전달받아서 페이지를 보여준다. 그렇기 때문에 사용되는 전체 트래픽을 줄여, 효율적인 웹 페이지 구현을 가능하게 해준다. 

 

 

 

Routing

- 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 

- React는 SPA방식을 사용하여 새로운 페이지를 로드하지 않고 하나의 페이지에서 필요한 데이터를 가져오는 SPA형식을 사용한다. 

 

 

리액트에서 라우팅 기능 사용하기 

 

1. 프로젝트 생성

create-react-app react

2. react-router-dom 설치하기

npm install react-router-dom

3. 라우팅 할 페이지 만들어주기

1) PageRoute.js

import React from 'react';

const PageRoute=()=>{
return(
    <div>
    	<h1> 라우팅 페이지 입니다. </h1>
    </div>
    );
   };
export defaulte PageRoute;

2) Home.js

import React from 'react';

const Home=()=>{
return(
    <div>
    	<h1> Home </h1>
    </div>
    );
   };
export defaulte Home;

3) App.js

import React from 'react';
import PageRoute from './PageRoute';
import Home from './Home';


const App=()=>{
return(
	<div>
    
    </div>
    );
   };
   
export default App;

 

4. Route component를 사용해 주소를 컴포넌트에 연결하기

<Route path="{url}/다음에 원하는 경로로 설정하기" component={나타낼 컴포넌트작성} />

import React from 'react';
import {Route, Routes, BrowserRouter} from 'react-router-dom';
import PageRoute from './PageRoute';
import Home from './Home';


const App=()=>{
return(
	<div>
    <BrowserRouter>
    	<Routes>
     		<Route path='/' component = {Home} />
    		<Route path='/pageroute' component={PageRoute} />
    	</Routes>
    </BrowserRouter>
    </div>
    );
   };
   
export default App;

 

 

link,  url 추가예정