React - route

React SPA (Single Page Application)

• 페이지가 한 개인 애플리케이션에서 여러 페이지를 보여주기 위해 Routing 방법을 사용한다.

1. Routing

• 라우팅이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것이다.
• react-router는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리

1-1. react-router 설치

npm install react-router-dom --save

1-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;

1-3. index.js

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

• <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트(<Routes />)로 변경한다.

1-4. Route 이동하기

1. <Link> 컴포넌트 사용하는 방법

2. withRouterHOC 로 구현하는 방법

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

• 클릭 시 바로 이동하는 로직 구현 시에 사용

• Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

  2) withRouterHOC 로 구현하는 방법

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

class Login extends React.Component {

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

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

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

export default withRouter(Login);

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현한다.
• ex. 로그인 버튼 클릭 시
  • Backend API로 데이터(User Info) 전송
  • User Data 인증 / 인가
  • response message
  • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동