React Router

React Router는 Single Page Application(SPA)을 구현할 수 있도록 해주는 아주 고마운 기능이다.

이전에 진행한 프로젝트에서는 각 웹 페이지의 수만큼 html 파일이 존재했는데, 이럴 경우 코드를 통합적으로 보거나 유지보수하기가 어렵다.
때문에 웹이 발전하면서 데이터도 방대해지고 기능 요구도 다양해지자, SPA를 구축하는 문화가 생겨났다.

Routing

Routing이라는 단어는 '한 개의 웹페이지 안에서 다른 URL 경로에 따라 다른 화면을 보여주는 것'을 의미한다.

리액트는 Framework가 아닌 view만을 담당하는 Library로서 라우팅 기능을 가지고 있지 않기 때문에, 나는 추가적으로 React-router Library를 다운 받아서 라우팅을 구현했다.

React Router

우선, npm 을 이용해 react-router-dom을 설치해주었다.
나는 지금 팀 프로젝트를 위해 설치받고 있는 것이기 때문에, 해당 파일명과 버전이 반드시 package.json에 기록되어서 팀원 분들이 확인할 수 있도록 --save 명령어를 함께 입력했다.

npm install react-router-dom --save

그 다음 Routes 컴포넌트를 구현했다.
현재 westagram이라는 instagram 클론 프로젝트를 하고 있는 나는 로그인페이지와 메인페이지의 접속이 필요하다.

그래서 Switch 기능을 통해 두 페이지를 연결해주었다.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  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} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

그 후, index.js 파일의 ReactDOM.render() 메소드에 Routes 컴포넌트와 DOM의 아이디가 root인 div 태그를 연결한다.

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

Route 이동

연결된 Route로 이동하는 방법은 두 가지다.

1. <Link> 컴포넌트 사용

• 클릭 시 바로 이동하는 로직을 구현할 때 사용한다.
• 예를 들어, Nav Bar에서 아이템을 클릭할 때 상세 페이지로 이동하는 것은 Link 컴포넌트로 구현하는 것이 효과적이다.

2. withRouterHOC 으로 구현

• 클릭 시 추가로 처리해야 하는 로직이 있을 때 사용한다.
• 예를 들어, 로그인 버튼을 클릭할 때 [Backend API로 데이터를 전송]하고, [User Data를 인증 및 인가] 받고, [response messeage를 통해 다른 페이지로 이동해야할 경우]에는 withRouterHOC로 구현하는 것이 효과적이다.

나는 Link 컴포넌트를 사용하지 않고, 바로 withRouterHOC를 구축했다.

구현한 코드는 다음과 같다.

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main-eunjin');
  }

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

export default withRouter(Login);

• onClick 이벤트를 사용해서 클릭 이벤트가 일어났을 때, goToMain 함수가 실행된다.
  함수 내에서history.push 메서드를 통해 이동을 path를 지정해준다.

export 하는 컴포넌트를 withRouter로 감싸준다.
(withRouter로 감싸주는 것을 HOC라고 한다.)