리액트는 SPA(Single Page Application)로 구성되어있다.
즉, 한개의 페이지로 여러 화면을 보여준다는 것이다.
하지만 이 경우 내가 원하는 위치를 북마크 할 수 없는 등 다양한 불편함도 존재했다.
이러한 것들을 해결해주는 것이 바로 리액트의 라우터 기능이다.

1. SPA && 라우팅

: SPA란 페이지가 한개인 애플리케이션을 말한다.
기존의 홈페이지들이 페이지의 수만큼 html파일이 존재하였다면 spa 에서는 단 한개의 html안에서 페이지를 보여준다.
이러한 spa에서 페이지를 보여주는 방법이 라우팅이다.

2. 라우터 설치

: 사실 리액트 라우터는 CRA로 설치되는 기본 라이브러리는 아니다. 서드 파티 라이브러리로 추가적으로 설치해주어야 하지만 거의 표준처럼 사용되고 있다.

npm install react-router-dom --save

3. 라우트 컴포넌트 구현하기

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;

• path에 있는 경로로 이동할 경우 해당 컴포넌트를 보여주는 방식이다.
• 그럼 어떻게 이동시킬까? 그건 아래 라우트에서 제공하는 컴포넌트를 이용한다.

4. 라우트 이동하기

1) Link 컴포넌트 이용하기

: Link는 라우터에 내장되어 있는 컴포넌트이다.
앞으로 우리는 html의 a태그 대신에 이 링크 태그를 사용하게 될 것이다.
(사실 Link는 컴파일 되면 a로 변환한다.)

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를 클릭하면 /signup으로 이동시켜준다.

2) withRouterHOC 로 구현하는 방법

: 우리는 export default 방식으로 컴포넌트를 내보냈다.
하지만 export default withRouter로 해당 컴포넌트를 내보내면 라우트로 바로 이동할 수 있게 된다.

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
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

• 위에서 history.push를 이용해서 해당 패스로 이동할 수 있는 함수를 만들었고 onClick이벤트를 이용해서 이동하게 만들었다.
• 하지만 props의 history로 라우트 정보를 받기 위해서는 withRouter로 해당 컴포넌트를 내보내야한다.