React Router

Why Router?

SPA (Single Page Application)

SPA는 Page가 한 개인 Application이다

 

한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법을 위해서 Router를 사용한다

 

Routing

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

React 자체에는 이러한 기능이 내장되어 있지 않다 ----> React가 framework이 아닌 Library인 이유 중 하나

 

React-router는 React의 라우팅 기능을 위해 가장 많이 사용되는 Library이다

 

React Router

Example

Routes.component.jsx

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;

index.js

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

 

Route로 이동하는 방법

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

페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현

로그인 버튼 클릭 시

Backend API로 데이터 전송

User Data 인증 / 인가

response message

Case 1: 회원 가입되어 있는 사용자 -> Main Page 이동

Case 2: 회원 가입되어 있지 않은 사용자 -> Signup Page 이동

 

추후 React-Router-DOM Documentation에서 history/location/match 블로그 작성 예정