react router

SPA

애플리케이션은 날이 갈수록 복잡해지고 다양성이 증대되고있다. 이에 따라 이전의 웹 개발 방식으로는 발전된 애플리케이션의 개발과 유지보수가 점점 힘들어졌고 웹 개발 방식 또한 발전했다. 현재 웹 개발이 지향하는 바는 SPA라고 한다. SPA는 single page application으로 하나의 html파일만을 갖는 애플리케이션으로 유지보수에 강점을 갖는다.

Router

SPA,즉 html이 하나인 애플리케이션에서 하나의 html에 여러 페이지를 보여주기 위해 router를 사용한다. Routing이란 다른 경로(주소)에 따라 다른 화면을 보여주는 기능으로 리액트 자체에 내장된 기능이 없기 때문에 리액트에서 라우팅 기능을 사용하려면 따로 react-router라는 서드파티 라이브러리를 설치해 사용한다.

React-router는 (npm install react-router-dom --)를 입력해 설치할 수 있다.(--save는 package.jason에 버전 기록을 남기기 위해 입력)

- 아래 내용을 가진 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;

• index.js의 컴포넌트에 아래 구문을 입력한다.

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

• 작업한 js파일에 1번에서 만든 js파일을 임포트하고 <Link> 혹은 withRouter를 이용해 페이지들 간의 이동경로를 만들 수 있다.

cf) <Link>는 html에서 <a>와 비슷한 기능이고 withRouter는 페이지 이동 시에 추가적으로 처리할 로직이 있을 때 이용한다.