[TIL] React - Router

👉 Todolist side-project

todolist side project 진행을 하고 있는데, 처음 시작할 때 프로젝트 구조를 생각하는 것이 어렵고, 어떤 component로 구성할지가 어려운 것 같습니다.

🔨 React-Router

여러 화면이 구성된 웹 어플리케이션을 만든다면 필수적인 라이브러리이며, React-native에도 사용 가능
사용자가 원하는 페이지로 이동을 원하게 되는데, 해당 페이지로 이동을 가능케하는 것이 Router의 역할

라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것
SPA : Single Page Application - 페이지가 1개인 어플리케이션

🧱 Hash Router

클라이언트를 위해 설계된 라우터. Hash(#)는 앵커링크를 정의할 때 사용. 주소창의 현재 페이지 경로 뒤에 # 식별자를 입력하면 브라우저는 서버 요청을 보내지 않고, 현재 페이지에서 식별자에 해당하는 id attribute가 있는 element를 찾아서 그 element의 위치를 화면에 보여준다.
모든 경로 앞에 #를 붙여야 한다 백엔드가 필요 없는 작은 클라이언트 사이트를 만들 때 유용한 도구

import React from "react";
import {
  HashRouter as Router,
  Route,
  Redirect,
  Switch
} from "react-router-dom";
import CurrentList from "../Page/CurrentList";
import PastList from "../Page/PastList";

export default () => (
  <Router>
    <Switch>
      <Route path="/" exact component={CurrentList} />
      <Route path="/pastlist" exact component={PastList} />
      <Redirect from="*" to="/" />
    </Switch>
  </Router>
);
// exact를 사용하는 이유 -> 주어진 주소와 같아야 render가 진행

🧱 BrowserRouter

실제 Browser 주소와 같은 형태를 보여준다. 앱을 router로 감싸면 router가 history api 에 접근할 수 있고, Route를 사용할 때 match, history, location 등의 props를 사용할 수 있다.

🧱 Switch

스위치는 라우터들을 묶은 다음, 가장 먼저 path에 매치되는 Route에 연결

🧱 Redirect

Redirect의 경우에는 해당되지 않은 주소가 입력시 정한 주소로 페이지를 보내주는 것이다. 여기서의 redirect는 push가 아닌 replace방식이라 history에 남지 않는다. location 객체를 통해서도 redirect가 가능

< React-Router https://reacttraining.com/react-router/web/guides/quick-start >