⚛ React Router

router에 들어가기 전, SPA에 대해 간단히 정의하고 넘어가보자

SPA란?

• Single Page Application, 즉 페이지가 하나인 애플리케이션

• 다수의 페이지가 존재하는 전통적 애플리케이션보다 기능 및 속도적인 면에서 우수한 장점이 있다.

• Routing 기능을 통해 하나의 웹페이지 안에서 여러 상태의 페이지를 보여줄 수 있다.

Routing

• 라우팅 기능은 다른 경로(url 주소)에 따라 다른 View(화면)을 보여주는 기능이다. (사전적으로는 패킷, 즉 특정 컨텐츠가 목적지까지 갈 수 있도록 전송 경로를 지정하는 것을 뜻한다.)

• 리액트 자체는 Route 기능을 갖고 있지 않기 때문에 npm을 통해 추가로 설치를 해주어야 한다. (해당 프로젝트 이외 Router, sass 등 프로그래밍을 도와주는 플러그인이나 라이브러리들을 추가로 설치하게 되는데 이들을 Third-party Library라고 한다.)

1. React-Router 설치

npm install react-router-dom --save

2. Routes 컴포넌트 구현

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
//
import Login from "./pages/Login/Login";
//
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;

• BrowserRouter(Router) component: 경로를 지정해주는 컴포넌트

  • A as B: A라는 컴포넌트를 B의 이름으로 사용하겠다는 뜻이다.

• Swtich component: 첫번째로 매칭되는 path를 가진 컴포넌트를 렌더링시키는 attribute이다. (early return과 비슷함)

• Route component:

  • path = "" attribute: 컴포넌트가 렌더링이되는 URL을 지정할 수 있다.
  • exact attribute: 부분적 일치가 아닌, 정확하게 일치하는 URL을 얻기 위해 사용한다.

3. Index.js에 Routes 컴포넌트 삽입

import Routes from './Routes';
ReactDom.render(`<Routes>`, document.getElementById('root));

🚓 Route 이동하기

1. <Link> component

• react-router-dom에서 제공하며 클릭 시 바로 이동하는 로직 구현에 주로 사용된다. (정보 처리 고려 X)

• DOM에서 <a>로 컴파일된다.

• ex) Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 상세페이지로 이동

• a vs Link

  • <a>: 외부 사이트로 이동

  • <Link>: 프로젝트 내 페이지로 전환할 때 사용한다.

import React from "react";
import { Link } from "react-router-dom";
class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/해당경로"> 클릭 시 이동을 원하는 컨텐츠 </Link>;
      </div>
    );
  }
}
export default Login;

2. withRouterHOC

• 페이지를 전환할 때 처리할 로직이 있을 경우 사용하여 구현 (단순 링크 X)

  • 로그인, back으로 데이터 전송, 응답 등 정보 처리 관련이 있을 때 사용

import React from "react";
import { withRouter } from "react-router-dom";
//
class Login extends React.Component {
  goToMain = () => {
    this.props.history.push("./mainym");
  };
  render() {
    return (
      <>
        <button className="loginButton" type="submit" onClick={this.goToMain}>
          로그인
        </button>
      </>
    );
  }
}
export default withRouter(Login); // login 컴포넌트에서 props에 route 정보를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 한다.

Reference

• 3rd party 써드파티란

• Switch문

• Switch는 언제 써야 할까?