[React] 라우팅(Routing)이란?

🍿 라우팅(Routing)이란?

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

• React 자체에는 이런 기능이 내장되어 있지 않다. (이것이 React가 Framework 가 아닌 Library 로 분류되는 이유)
• 그래서 React의 라우팅 기능을 위해 가장 많이 쓰이는 React-router를 사용한다.

 

🍿 리액트 라우터(React Router)란?

angular이나 angular2, backbone 같은 프레임워크는 프레임워크이기 때문에 라우팅 기능이 기본적으로 들어있다. 하지만 React는 View만 담당하는 라이브러리다. 그래서 라우팅을 담당하는 react-router을 따로 설치해주어야 한다. 그리고 또 나중에 Model과 Controller를 담당하는 패키지를 설치해야 한다.

예를 들면, 원래는 페이지에 따라서 url link가 달라지게 된다. 그런데 SPA는 구조상 단일 페이지이기 때문에 보여지는 페이지 모습은 달라져도 주소는 달라지지 않는 문제가 발생한다. 이러한 문제를 해결해주기 위해서 등장한 라이브러리가 React Router이다.

 

🍿React Router 적용하는 법

 

🔥 설치 하는 법

1. 터미널에 다음과 같이 적는다👇👇

npm install react-router-dom --save

 

설치하면 아래와 같이 package.json 파일에 'react-router-dom'이라는 코드가 생성되었을 것이다.

 

2. Routes 컴포넌트 구현하기

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>
	<Nav />
          <Switch>
            <Route exact path="/" component={Login} />
	    <Route exact path="/signup" component={Signup}/>
            <Route exact path="/main" component={Main} />
          </Switch>
	<Footer />
      </Router>
    );
  }
}

export default Routes;

 

3. index.js 변경

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

원래는 저기 <Routes /> 부분이 <App />로 되어있었을 것이다. 변경해줍시다!

4. Route 이동하기

Route를 이동하는 방법은 두 가지가 있다.

🥖 <Link> 컴포넌트 사용하기

• 클릭 시 바로 이동하는 로직 구현 시에 사용한다.
  ex) Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동.
• react-router-dom에서 제공하는 <Link> 컴포넌트는 DOM에서 <a> 텍스트로 변환된다.
  cf) <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="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

 

🥖 withRouterHOC로 구현하기

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현한다.
  ex) 로그인 버튼 클릭 시
  • Backend API로 데이터 전송
  • User Data 인증/인가
  • response message
  • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

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

class Login extends React.Component {

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

  // 실제 활용 예시
  // goToMain = () => {
  //   if(response.message === "valid user"){
  //     this.props.history.push('/main');
  //   } else {
  //     alert("너 우리 회원 아님. 가입 먼저 해주세요")
  //     this.props.history.push('/signup');
  //   }
  // }

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

export default withRouter(Login);

• <Link /> 를 사용하지 않고 요소에 onClick 이벤트를 통해 페이지를 이동하는 방법도 있다.
• goToMain 라는 event handler에서 구현한 것처럼 props 객체의 history (this.props.history)에 접근해서 이동할 수 있다.
• 받은 history의 push 메서드의 인자로 Routes.js 에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있다.
• 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트를 withRouter로 감싸주어야 한다.
  이렇게 withRouter 와 같이 해당 컴포넌트를 감싸주는 것을 HOC(Higher Order Component) 라고 한다.