REACT router

routing을 위한 로직이 들어있지 않기 때문에, routing 기능을 해주는 라이브러리(react-router)를 추가해야 한다.

react-router 사용하기

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

routing을 설정한 컴포넌트(<Routes />)를 첫번째 인자로 사용한다.

Routes 컴포넌트 구현하기

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
import Home from './Pages/Home';
import Signup from './Pages/Signup';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/signup" component={Signup} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

-/경로로 가면 Home컴포넌트를 화면에 보여준다.
-/signup경로로 가면 Signup컴포넌트를 화면에 보여준다.

Route 이동하기

Link 컴포넌트를 사용하는 방법

-Link로 감싼 태그를 클릭 시 설정한 path로 이동한다.

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>로 변환된다.

withRouter HOC로 구현하는 방법

-요소에 onClick 이벤트를 달아서 클릭 시 이동하는 방법

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

class Login extends React.Component {

  goToSignup() {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <div
          class="btn signup-btn"
          onClick={this.goToSignup.bind(this)}
        >
          회원가입
        </div>
      </div>
    )
  }
}

export default withRouter(Login);

-btn signup-btn을 클릭하면 history의 push 메서드에 이동할 path를 인자로 넘겨주는 goToSignup를 호출한다.
-export하는 class에 withRouter로 감싼다. 이렇게 해당 컴포넌트를 감싸주는 것을 higher-order component(HOC)라고 한다.
-HOC는 컴포넌트를 인자로 받고 컴포넌트를 return하는함수다.