리액트 라우터에 대하여

SPA

Single Page Application

최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다.

 

SPA단점

앱의 규모가 커지면서 자바스크립트 파일이 너무 커지는 것이다.

페이지 로딩시 사용자가 실제로 방문하지 않을 수 도 있는 페이지의 스크립트도 불러오는데 그로인한 개선방법을 스플리팅(code splitting)을 트래픽과 로딩 속도를 개선할 수 있다.

 

Router

다른 조수에 다른 화면을 보여주는 것으로 자체에 기능이 내장되어 있지는 않다.

그 대신 브라우저의 API를 직접 사용하여 관리하거나 라이브러리를 사용하여 쉽게 구현할 수 있다.

 

설치하는 방법은 다음과 같이 작성하면 된다.

$ yarn add react-router-dom

이 명령어를 쓰게 되면 리액트 라우터 라이브러리를 설치하게 된다.

 

리액트 라우터에서 제공하는 몇 가지 기본 컴포넌트의 역할은 다음과 같다.

<BrowserRouter />

HTML5 히스토리 API를 사용하여 주소를 간리하는 라우터이다.

<Route />

요청 경로와 렌더링할 컴포넌트를 설정한다.

<Switch />

하위에 라우터 중 하나를 선택한다.

<Redirect />

요청 경로를 다른 경로로 리다이렉션한다.

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={App} />
        <Route path="/sellermain" component={SellerMain} />
        <Route path="/login" component={Login} />
        <Route paht="/signup" component={SignUp} />
        <Redirect path="*" to="/" />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;