[TIL][React] Router

Routing

다른 경로(URL 주소)에 따라 다른 화면을 보여주는 것

SPA - Single Page Applicaiton

한페이지가 한 개인 어플리케이션
한개의 웹페이지 안에서 여러개의 페이지를 보여주기 위해 Routing을 한다.

React-Router

리액트의 라우팅 기능을 위해 가장 많이 사용하는 라이브러리
CRA에 Routing을 위한 로직이 없기 때문에react-router를 설치해
Routing을 구현

1. React Router 설치 및 구현

npm install react-router-dom --save

🤔 --save는 package.json에 설치된 패키지의 이름과 버전 정보를 업데이트함으로 꼭 적어주자.

Route 컴포넌트 구현하기

import React from 'react'; 
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 

import LoginPage from './pages/Login/login';
import MainPage from './pages/Main/main';

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={LoginPage} />
                    <Route exact path="/main" component={MainPage} />
                </Switch>
            </Router>
        );
    }
}

export default Routes; //export default 클래스명 잊지말자!

BrowserRouter(Router)
history API를 사용해 URL과 UI를 동기화하는 라우터

Route
컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트 및 함수를 렌더링

Switch
하나의 매칭되는 요소만 렌더링(사용하지 않을 경우 매칭되는 모두를 렌더링)

2. Index.js

CRA로 만든 앱에 routing 기능을 적용하려면 index.js를 수정해야한다.

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

3. Route 이동

Route의 이동법은 크게 아래의 두가지로 나눠진다.

3-1.<link> componenet 사용

<Link> 컴포넌트는 DOM에서 <a> 로 변환 되기 때문에 지정한 경로로 바로 연결 시켜주는 역활을 한다. 단, 싱글페이지이기 때문에 외부로 연결은 불가능 하다.

import React from 'react';
import { Link } from 'react-router-dom'; //react-router-dom에서 Link component를 불러옴.

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link> //link componenet를 사용하여 signup 페이지로 이동
      </div>
    )
  }
}

export default Login;

3-2. withRouterHOC 로 구현

페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우(로그인, 장바구니 등)

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

class Login extends React.Component {

 goToMain = () => {
   this.props.history.push('/main'); // this객체안 props갣체안 history객체의 push 매서드
 }
 render() {
   return (
     <div>
       <button
         className="loginBtn"
         onClick={this.goToMain} // onClick이벤트를 통해 페이지로 이동
       >
         로그인
       </button>
     </div>
   )
 }
}

export default withRouter(Login);