[JavaScript] React - Router

React - Router

SPA (single page Apllcation - 페이지가 한개)

• 이전에 우리가 계속 사용했던 것은 페이지 수만큼 html 파일이 존재했지만, 리액트에서 사용할 프로젝트에서는 html 파일의 개수는 1개이다.
• SPA인데 여러개의 페이지를 보여주는 방법을 Routing이라고 한다.

Routing

• Routing은 주소에 따라서 서로 다른 view를 보여줍니다.
• 리액트 자체에는 이러한 기능이 내장되어 있지 않습니다. (Library인 이유)
• React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리입니다.
  (Third-pary Library)

Router 설치 및 구현

설치 방법
npm install react-router-dom --save
--save를 해주는 이유는?
pakage.json에 router 라이브러리의 설치 정보를 저장하기 위해서 입니다.

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

// <Routes.js>
import React from 'react';
import {
  BrowserRouter as Router,	// BrowserRouter를 import하고 Router로 호출
  Switch,			// Switch import
  Route,			// Route import
} from 'react-router-dom';

import Login from './pages/Login/Login';	// Login 컴포넌트 import
import Signup from './pages/Signup/Signup';	// Signup 컴포넌트 import
import Main from './pages/Main/Main';		// Main 컴포넌트 import

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
	// path 주소가 http://localhost:3000/으로 reuest시 Login 컴포넌트 호출
	  <Route exact path="/signup" component={Signup} />
        // path 주소가 http://localhost:3000/signup으로 
        // reuest시 Login 컴포넌트 호출
          <Route exact path="/main" component={Main} />
        // path 주소가 http://localhost:3000/main으로 
         //reuest시 Login 컴포넌트 호출
        </Switch>
      </Router>
    )
  }
}

export default Routes;

Route로 이동하는 방법은 2가지

1. withRouterHOC를 사용하는 방법
2. <Link> 를 사용하는 방법

1번 방법인 withRouterHOC를 먼저 봅시다.

• button의 onClick 이벤트 발생하게되면 goToMain 함수를 호출합니다.
• goToMain 함수에서 history 메소드의 인자로 Routes.js 에서 설정한 path를 넘겨주면 해당 path로 이동할 수 있습니다.
• 또한 해당 컴포넌트에서 route 정보(history)를 받으려면 export하는 컴포넌트에 꼭 withRouter(Login)으로 꼭 감싸주어야합니다.
  (HOC : High Order Component)

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

class Login extends React.Component {

  goToMain = () => {			    // goToMain 함수 정의
    this.props.history.push('/signup');	    // localhost~/signup으로 이동
  }

  render() {
    return (
      <div>
        <button
          class="loginBtn"
          onClick={this.goToMain}      //onClick event 발생시 goToMain 호출

          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

2번 방법인 Link 컴포넌트 활용

• react-router-dom 에서 제공하는 Link 태그도 DOM에서 a 태그로 변환됩니다.
• a 태그와 마찬가지로 Link 태그도 설정한 경로로 바로 이동시켜줍니다.

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>	//Link to:path 사용
      </div>
    )
  }
}

export default Login;

여기서 Link와 a의 차이는 무엇일까요?
<a> 태그는 외부 사이트로 이동할 때 사용됩니다.
<Link> 태그는 프로젝트 내에서 페이지 전환될 때 사용됩니다.