React - React Router

React-Router

React-router는 react에서 Routing을 위해 가장 많이 사용되는 라이브러리이다.
CRA를 사용하여 react 프로젝트를 진행한다면 Routing을 위한 로직이 들어있지 않기 때문에,
Third-party Library를 import해서 사용해야한다.

* Routing이란 다른 경로에 따라, 다른 화면을 보여주는 것이다.

1. 설치

npm install react-router-dom --save

2. Component 구현

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

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

• BrowserRouter

React-router에는 여러가지 Router가 있다.
그 중에서 BrowserRouter는,
HTML의 history API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화 상태로 유지하는 Router이다.

• Switch

경로와 일치하는 하나의 Route만 랜더링할 수 있도록 한다.

• Route

경로가 현재 URL과 일치 할 때 일부 UI를 랜더링한다.

3. Routes 이동

Link

import React from 'react';
import { Link } from 'react-router-dom';

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

<Link>란, React-router에서 제공하는 Component로, DOM에 그려질 때 <a>로 변환된다.
<a>처럼 지정한 경로로 이동시켜주는 기능을 한다.

• a
  외부 사이트로 이동하는 경우에 사용
• Link
  프로젝트 내에서 페이지를 전환하는 경우에 사용

withRouterHoc

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/signup');
  }
  
  render() {
    return (
      <div>
        <button
          class="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

withRouter HOC를 통해 history객체의 속성에 접근하여 Route를 이동할 수 있다.

HOC - Higher-oder component란 component를 인자로 받아 새로운 component를 return하는 함수이다.

• Link
  클릭 시 바로 이동하는 로직 구현시에 사용
• withRouterHOC
  페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용