React 8 Router

 - React는 싱글 페이지로 되어 있다. 그렇다면 페이지는 1개 밖에 없다는 것인데?!?! 어떻게 url을 바꿔가면서 페이지를 이동하는 것일까? 그것은 가상DOM을 이용해 해당 url이 되면 해당되는 가상DOM을 들고 온다. 그것을 가능하게 해주는 것이 Router이다. (사실 이제 공부하고 있어서 다른 방법은 모른다 ㅋ)

 

시작하기전 설치해야 하는 것이 있다. 작성 시점 제가 적용한 버전

npm i react-router-dom@5.3.0

설치한 후 import로 선언한 후 사용한다. 상세하게 보고 싶다면 공식 사이트를 참고하자!!!!

공식 사이트 링크

 

 

---

Router

 -  최상위 주머니라고 생각하면 편하다!

 

Switch

 - 일치하는 단 하나의 컴포넌트만 렌더링 해준다.

 

Route

 - 이동 결로를 설정해주고 해당 url이 나오면 해당 컴퍼넌트를 불러온다.

 

예)

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Pages/Home';
import Calendars from './Pages/Calendars';

function App() {
  return <Router>
    <Switch>
      <Route path="/calendars">
        <Calendars />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>;
}

export default App;