[TIL] React Router

1. SPA

단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 헨더링과 비교할 떄, 배포가 간단하며 네이티브 앱과 유사한 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. 하지만 앱의 규모가 커지면 자바스크립튼 파일 사이즈가 너무 커진다/

2. Routing

라우팅(Routing)이란 다른경로(주소)에 따라 다른 View(화면)를 보여주는 것이다.

3. React Router

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있느 routing solution인 react-router를 추가해서 routing을 구현한다,

3-1 react-router 설치
npm install react-router-dom --save

3-2 Routes 컴포넌트 구현하기

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;

3-3. index.js

ReactDOM.render(<Routes />, document.getElementById('root'));

컴포넌트 대신에 routing 을 설정한 컴포넌트 ()로 변경한다.

4. Route 이동하기

Route 이동하는 방법은 두가지가 있다.

1) 컴포넌트 사용하는 방법

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;

2)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);