MPA는 서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달한다. 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송되며 서버에 라우팅을 처리하는 기능으로 서버에서 여러 페이지를 관리한다.
페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘들다.
SPA는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다. 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낄 수 있다는 장점이 있다.
React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현한다. 웹에서는 react-router-dom을 사용하며 적용 시에는 서버의 모든 path에서 같은 앱을 서빙하도록 해야 한다.
<BrouserRouter>
로 감싸 Router Context를 제공해야 한다.import { BrowserRouter, Route, Switch } from 'react-router-dom'
export function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/about"><AboutPage /><Route>
<Route path="/contact"><ContactPage /><Route>
<Route path="/"><HomePage /><Route>
</Switch>
</BrowserRouter>
)
}
import { NavLink } from 'react-router-dom'
function HomePage() {
return (
<div>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</nav>
<div>Homt 페이지</div>
</div>
)
}
HTML5의 History API를 사용하여, UI와 URL의 싱크를 맞추는 역할을 한다. 모든 URL에 대해 동작하게 하기 위해서는 서버 설정을 필요로 한다. 모든 path 앞의 basename을 지정 할 수 있다. Ex) basename="/ko"
forceRefresh로, 페이지 이동 시 리프레시할 것인지 지정할 수 있다.
여러 Route 중 매치되는 Route 위에서부터 하나 선택하여 렌더링하게 한다. 매칭되는 Route가 없으면 아무것도 보여주지 않는다. fallback용으로 404 Not Found Page를 추가한다. path="/"의 경우 모든 path에 매칭되므로 exact 키워트를 추가하거나 가장 아래로 내린다.
path와 컴포넌트를 매칭하는 역할을 한다. 매칭되는 컴포넌트는 children으로 넣어주거나 component prop으로 넘긴다. exact 키워드로 정확하게 매칭하는 path로 성정해야 한다. Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받는다.
render prop으로, 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통저한다.
Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동한다. Switch 안에서 쓰일 경우 from, to를 받아 이동하게 만든다.
Ex) from="/" to="/login"
to prop을 특정 URL로 받아, 클릭 시 네비게이션 한다. anchor tag를 래핑하며 NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있다. to에 location object나 함수를 받을 수 있다.
최상위 컴포넌트가 아니더라도, hook으로 react-router 관련 객체에 접근할 수 있다. history, location, params, match 객체에 접근한다.