React 4 - React Router

리액트의 특징

리액트는 여러 컴포넌트들을 만들지만, 브라우저에 최종 렌더링되는 html문서는 1개인 SPA(Single Page Application) 방식을 지향합니다. 이에, 렌더링되는 한 개의 HTML 문서에서 여러 개의 페이지를 보여주거나 이동시켜주는 Routing기능을 필요로 합니다.

Routing

라우팅이란, 정해진 경로명(주소)에 따라 다른 View(페이지)를 보여주는 것을 뜻합니다. 하지만 리액트 자체에는 이러한 라우팅 기능이 내장되어 있지 않아, 외부 라이브러리를 설치하여 적용하여야 합니다.

React-router는 리액트의 라우팅 기능 적용을 위해 가장 많이 사용되는 외부 라이브러리입니다.

React-router 설치

아래 npm 메시지를 통해 react-router를 설치합니다.

npm install react-router-dom --save

Routes 컴포넌트 구현 (예시)

Routes.js 파일을 새로 생성하여, 아래와 같이 각 페이지별 경로와 경로명을 지정해줍니다.

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;

각 페이지의 뷰를 import 해줍니다.
라우터 class 내에 render 함수를 정의하고, <Router></Router> 리턴값 내부에 각 페이지 별 URL 경로를 지정해줍니다.

index.js 수정

아래 렌더링 메시지를 통해 Routes를 지정해줄 수 있습니다.

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;

<link> 태그는 DOM에서 <a>로 변환되어 적용됩니다.
<a> 태그는 외부 사이트로 이동하는 경우, <link> 태그는 프로젝트 페이지 전환에 사용됩니다.

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

export default withRouter(Login);

<Link /> 를 사용하지 않고 요소에 onClick 이벤트를 통해 페이지를 이동하는 방법도 있습니다.
goToMain 라는 event handler에서 구현한 것처럼 props 객체의 history (this.props.history) 에 접근해서 이동할 수 있습니다.
console.log로 this.props.history에 어떤 정보들이 담겨 있는지 한 번 확인 해보세요 :)
받은 history의 push 메서드의 인자로 Routes.js 에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있습니다.
이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 합니다.
이렇게 withRouter 와 같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component (이하 HOC) 라고 합니다.

두 라우팅 방식의 차이점

1. <LINK>