TIL) React router로 링크 맛만보기

Solmii·2020년 6월 16일

React

목록 보기

5/11

오늘은 ~~(사실 어제는...🤣)~~ 프로젝트 대비를 위한 초기 프로젝트 세팅에 대한 세션이 있었다.
요 내용은 다시 정리해서 올릴 예정이고...
오늘은 react-router 를 이용해 링크를 걸었던 내용에 대해서 정리해보기로!!!

router란?

react로 개발할때, SPA(Single Page Application)로 웹페이지의 라우팅 문제를 담당하는 third party library 가 많은데, React Router 도 그 중 하나다! (그 중에 제일 있기있는 친구임!)

사실 인기있디 정도가 아니라 거의 표준처럼 사용되고 있는 네비게이션 라이브러리라고 한다.

React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 된다.

따라서 SPA에서 제공하는 다이나믹한 사용자 경험을 그대로 살리면서도 기존 웹사이트에서 가능하던 브라우저 상의 매끈한 라우팅을 제공할 수 있다!!!

react-router 설치

npm install react-router-dom --save

--save 는 해당 라이브러리를 package.json 에 저장하기 위해 입력하는 명령어

구글링 하다가 스택오버플로우에서 NPM 5 이상에서는 자동으로 패키지를 저장하므로 --save가 더이상 필요하지 않다. 는 글을 보았는데, 찾아보니 여전히 많은 사람들이 --save 혹은 경우에 따라 --save-dev 를 사용하고 있었다.
그래서 나도 일단 --save 붙임!!

react-router 사용

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

src 폴더에 있는 index.js 파일을 위와 같이 수정해준다.
따로 수정하지 않았다면, <Routes /> 자리에 <App /> 이 들어가 있을 것이다.

참고로 <Routes /> 는 react-router 를 설치하면 기본으로 딸려오는 Component다.
아래의 [Routes 컴포넌트 구현] 에서 한번 더 나오니까 일단 넘김~!

Routes 컴포넌트 구현

import React from 'react';
// react-router-dom 패키지에서 아래의 기능을 가져옴
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './Pages/Login/Login';
import Main from './Pages/Main/Main';

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;

요 아이가 바로 <Routes /> Component!
링크를 걸 친구들을 import 하고, import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 이라는걸 그냥 복붙! 한다.

react-router 패키지에서 제공하는 다양한 기능들을 그냥 import만 해오면 바로 쓸 수 있다.

그리고 아래에 <Switch> 안에서, 이동할 component 들의 경로(path)를 설정한다.
/ 는 기본값 (index) 이다.
westagram 의 경우에는 login page를 기본값으로 지정했다.
이제 import 해온 각각의 component에 아래의 두가지 방법 중 하나로 여기서 지정한 경로를 링크해주면 된다!!!!

Link 컴포넌트로 구현

<Link/> 컴포넌트를 사용해서 Routes에서 설정한 path로 이동!

import React from 'react';
import { Link } from 'react-router-dom'; // Link 를 먼저 import

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/login">로그인</Link>
      </div>
    )
  }
}
export default Login;

로그인 을 클릭하기만 하면 이동하고 싶을 때!
결국 <a> 태그로 전환된다고 생각하면 쉽다!

하지만, 로그인 버튼에는 적절하지 않다. 왜?
아이디, 비밀번호가 유효한지(가입된 회원인지) 확인해야 하니까!!

product page, menu (Nav) 바 등에 걸면 좋다! (단순 링크)

withRouter HOC로 구현

Link를 사용하지 않고, 요소에 onClick 이벤트를 달아서 이동하고 싶은 곳으로 넘긴다!

import React from 'react';
import { withRouter } from 'react-router-dom'; // withRouter 를 먼저 import

class Login extends React.Component {

  goToMain() { // 만약 로그인 버튼이라면 id, pw 체크해야 하니까 if 문으로 조건!
    this.props.history.push('/main'); // history : 기본으로 내장된 props (객체 형태)
  }

  render() {
    return (
      <div>
        <div
          class="btn login-btn"
          onClick={this.goToMain.bind(this)}> // .bind(this) 은 goToMain 함수가 arrow 함수가 아닐때!!
          로그인
        </div>
      </div>
    )
  }
}

export default withRouter(Login); // Login component를 감싸줌 => 이게 바로 HOC!