React - React Router

React Router

리액트는 SPA(Single Page Application)구조를 사용하므로 index.html은 하나만 존재하며, 경로에 따라 페이지 전환을 해주어야 한다.

Routing

라우팅(Routing)이란 다른 경로(url)에 따라 다른 View를 보여주는 것 - 리액트 자체에 기능이 없기 때문에 가장 많이 쓰는 React-router를 사용한다.

React Router

가장 인기있는 routing solution인 react-router 설정

1. react-router 설치

npm install react-router-dom --save

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. index.js

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

Route 이동하기

Route 이동하는 방법은 Link와 withRouterHOC 의 두가지 방법이 있다.

1. Link
   react 에서는 외부 페이지로 이동할 때는 <a> 태그를 사용하지만 프로젝트 내에서 페이지 전환을 할 때는 <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;

2. withRouterHOC
   페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용한다.

사용하는 경우

1. 로그인 버튼 클릭 시
2. Backend API로 데이터(User Info) 전송
3. User Data 인증 /인가
4. reponse message
   Case 1: 회원 가입되어 있는 사용자 -> Main페이지 이동
   Case 2: 회원 가입이 되어 있지 않는 사용자 -> Signup 페이지로 이동

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }

  // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);