[ React : Router ]

✔️ React Router 설치

$ npm install react-router-dom --save

1. Routing

• routing은 다른 경로(주소)에 따라 다른 View(화면)를 보여주는 것을 말한다.
• 리액트 자체에는 이러한 기능이 내장되어있지 않기 때문에 routing을 사용하기 위해서는 추가적인 설치가 필요하다. 이러한 이유 때문에 리액트는 Framework 가 아닌 Library 로 분류된다고 볼 수 있다.

이전에 언급했듯 router의 기능은 react에 내장되어 있지 않고, Create React App(CRA)에도 특별히 routing을 위한 로직이 들어있지 않기 때문에 흔히들 많이 사용하는 routing solution인 react-router를 따로 설치해야 한다. (react-router는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리다.)

2. react-router 설치

npm install react-router-dom --save

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

export default Routes;

4. router로 경로 이동하는 방법 두가지

1. component 이용하기

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;
  

a vs Link

• < a> tag : 외부 웹사이트로 이동하는 경우 사용
• < Link> tag : 내부 component로 이동하는 경우 사용

2. withRouterHOC 로 구현하기

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

class Login extends React.Component { 
    goToMain = () => {     this.props.history.push('/signup'); 
} 


// 실제 활용 예시 
// 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 vs withRouterHOC

• Link : 클릭 시, (아무런 조건 없이) 바로 이동하는 로직 구현시에 사용.
• withRouterHOC : 페이지 전환 시, 추가로 처리해야하는 로직이 있는 경우 사용한다.