React Router

다른 경로(url 주소)에 따라 다른 화면(View)를 보여주는 것을 말한다.

react-router-dom(리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조) 서드 파트 라이브러리를 추가해서 사용하는데 다음과 같이 설치 할 수 있다.

🎃 서드 파트 라이브러리? 제작사에서 만든것이 아니라 다른 업체에서 만든 해당 툴 지원 라이브러리 (제 3자로써 중간다리 역할을 하는 것)

npm install react-router-dom --save

import React from 'react';
import {
  BrowserRouter as Router, //as를 이용해 Router로 별명 지정
  Switch, // 모든 <Router> 요소들을 반복하면서, 현재위치와 일치하는 첫번째 요소만 렌더링
  Route, // 경로와 컴포넌트들을 매칭하여 경로와 컴포넌트가 매칭이 되면 컴포넌트를 보여줌
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} /> //exact는 정확하게 일치할 경우 렌더링
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

Route 이동하는 방법 Link로 이동하는 방법과 withRouterHOC 두 가지 방법이 있다.

Link

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/home">홈으로...</Link>
      </div>
    )
  }
}

export default Login;

프로젝트 내에서 페이지 전환하는 경우에 <Link> 컴포넌트를 이용해 전환할 수 있다.

withRouterHOC

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

class Login extends React.Component {

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

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

export default withRouter(Login);

버튼을 클릭했을 때 this.props.history.push로 이동하게 할 수 있는데, 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현하면 좋다.