React Router 설정📍

Routing🖖🏼

: 다른 주소에 따라 다른 뷰(화면)을 보여주는 기능이다.
: React는 Framework 가 아닌 Library이기 때문에 별도의 Router 라이브러리를 따로 설치해서 적용시켜 주어야 한다.

Routing 적용의 두 가지 방법✌🏼

-아래 두 가지 방법을 적용하기 전 먼저 react-router를 VScode 내 terminal 혹은 terminal에서 해당경로에 위치하게 한후 npm install react-router-dom --save 입력을 통해 설치한다.

• --save라고 표시하는 이유는 package.json에 함께 저장되게 하기 위함이다.

공통

• 먼저 index.js로 이동하여 Routes를 사용하기 위해 render 되는 화면에 Routes component를 추가하고 import 해준다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import Routes from './Routes';

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

• Routes.js 이름의 파일을 새로 만들고 그안에 아래와 같은 공통 내용을 입력해준다.

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
import Login from './pages/Login/login';
import Main from './pages/Main/main';
//routes를 통해 보여 질 두 화면의 경로를 import 한다. 

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/main" component={Main} />
            //기본이 될 화면에는 path `/`로 설정해주고 클릭해서 들어갈 화면은 화면의 이름과 동일하게 `/화면컴포넌트이름`으로 설정해준다 
        </Switch>
      </Router>
    )
  }
}

export default Routes;

withRouter HOC

• 다른 페이지로 이동한다는 것은, 어떤 이벤트가 발생했을때 이동된다는 의미이므로 이벤트의 요소에 onClick이벤트를 달아 이동하고 싶은 곳으로 이동할 수 있다.
• 함수를 만들엊 주고 (ex. goToMain () 만들고 this.props.history에 접근해서 받은 history 에 push method를 통해서 path를 인자로 받아서 라우트로 이동하는 방식이다.

상단/하단 설정

• 우선 첫 페이지로 설정한 기본 페이지의 상단과 하단에 withRouter로 import/export한다고 아래와 같이 작성한다.

import { withRouter } from 'react-router-dom';
.
.
.
.
.
export default withRouter (Login); 

함수 설정

• render() 위에 goToMain 함수를 아래와 같이 만들어 주고 (main페이지로 이동하겠다는 의미)
• click event 를 걸어줄 요소에 onClick event를 걸고 아래와 같이 코드를 입력해 주면 끝!

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


onClick={this.goToMain.bind(this)}

Link Component

상단/하단 설정

• withRouter와 다르게 하단은 그대로 유지하고 상단만 link 로 import한다고 입력 하면된다.

import { Link } from 'react-router-dom';

링크 설정

• 클릭했을때 이동해야하는 그 tag 요소를 link jsx 태그로 감싸면 된다

	<div>
        <Link to="/main">로그인</Link>
    </div>