react-dom-router

react web app에서 router를 이용해 페이지를 이동해보자.

 

라우터를 사용하기 위해서는 3개의 컴포넌트가 필요합니다.

1. router 컴포넌트

2. route 매칭 컴포넌트

3. navigation 컴포넌트

1. Router 연결 컴포넌트

router란 다수의 네트워크를 연결하는 요소.

BrowserRouter, HashRouter...

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  holder
);

2. route 매칭 컴포넌트

경로와 해당 컴포넌트를 매칭 시켜주는 요소.

route, switch...

3. navigation 이동 컴포넌트

다른 주소로 이동시켜주는 요소.

Link, NavLink...

 

코드 스플리팅

웹의 한가지 큰 특징은 방문자가 앱을 사용하기 전에 전체 앱을 다운로드하지 않아도 된다는 것입니다. 

해당 컴포넌트가 브라우저에 나타날 때만 로드하여 처음에 로드가 오래 걸리는 것을 방지할 수 있습니다.

npm install @loadable/component

 

scroll 복구..?

https://reacttraining.com/react-router/web/guides/scroll-restoration

 

리덕스와 합치기