React Router

 

 

리엑트를 배우기 위해 codecademe 튜토리얼도 해보고,

리엑트 강의 보면서 코드도 따라쳐보며 나는 리엑트를 좀? 안다고 생각했다.

 

그런데 바닐라 자바스크립트로 만들었던 인스타그램 클론 코드를 

리엑트로 옮기는 과정에서 나의 생각은 완전히 바뀌었다..

 

일단, 리엑트의 SPA 개념을 알고는 있었지만 머리에 잘 그려지지 않았던게 문제였다.

 

이전에도 직접 리엑트 페이지를 만들어보았지만, 

그저 기능이 실행되는거에 만족했지,

내 코드를 돌아보며 이해하려는 회고가 없었다. 

 

그래서 아무도 도와주지 않고, 아무것도 없는 0 상태에서 

바닐라 자바스크립트를 리엑트로 옮기려니 

막막했던 것이다.

 

자, 그럼 이번에는 나의 스스로 자립한 첫 리엑트 코드로 SPA, Router 개념을 살펴보도록 해보자.

 

 

위 코드는 우리가 리엑트 파일의 화면을 실행하는 index.html이다.

 

그리고 우리는 아래의 index.js에서 index.html의 body 태그 안에 id가 root인 div태그 자리에 우리가 만든 Routes 컴포넌트을 연결시켜주려한다.

 

 

그리고 우리는 Routes.js에서 아래와 같이 어떤 길로 페이지를 연결시켜 줄지를 적어준다.

 

우리는 위의 코드 3번째 줄에서

pages폴더안에 shinyeongkim 폴더안에, Login 폴더 안에 Login.js 파일을 가져와 'YeongLogin'이라는 이름을 지어 위 route.js파일에서 사용할 수 있도록 import 해주었다.

Main도 마찬가지 이다.

 

그리고 우리는 Routes라는 이름의 class형 컴포넌트 안에서 <Router> 와 <Switch> 태그로 감싼 <Route> 태그를 통해 

두개의 경로 페이지를 만들어 주었다.

 

여기서 중요한 것은, 

우리가 경로를 설정하고, 그 경로에서 render할 컴포넌트 명을 설정했지만, 

login-shinyeongkim 페이지의 html파일이 또 만들어지는 것이 아니라

index.html 하나 안에서 페이지 주소가 바뀌면서, 우리가 지정한 컴포넌트가 render 되는 것이다.

 

 

 

그러나 만약 우리가 페이지 이동없이 한 페이지만 구현하고 싶다면, 

Route기능을 제외하고, 한 페이지에 필요한 만큼 각 부분들을 컴포넌트화해서 

import와 export를 활용해 멋진 페이지의 index.html 파일을 렌더할 수 있을 것이다. 

 

---

 

그런데, Router도 패키지를 설치해야하는 것 아닌가요?

 

그렇다. :) 

 

먼저, Router 설치 방법에 대해 알아보자.

 

 

React-Router 설치

npm install react-router-dom --save

 

react-router 사용

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

 

 

Routes 컴포넌트 구현하기

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
import Home from './Pages/Home';
import Signup from './Pages/Signup';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/signup" component={Signup} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

 

 

Route 이동하기

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

1) 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;

그런데 react-router-dom에서 제공하는 Link 컴포넌트는 dom에서 <a> 로 변환되므로, 혹시 a태그를 사용하고 싶지 않다면 Link를 사용하지 않으셔도 됩니다. (예를 들어 이미 다른 태그로 버튼 컴포넌트를 만들어 놓았을 경우..)

 

3) withRouter HOC로 구현하는 방법

Link를 사용하지 않고, 요소에 onClick 이벤트를 달아서 이동하고 싶은 곳으로 넘기는 방법도 있다. 아래 goToSignup 라는 event handler에서 구현한 것처럼 this.props의 history에 접근해서 이동할 수 있다.

받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면, 해당 라우트로 이동할 수 있다.

 

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

class Login extends React.Component {

  goToSignup() {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <div
          class="btn signup-btn"
          onClick={this.goToSignup.bind(this)}
        >
          회원가입
        </div>
      </div>
    )
  }
}

export default withRouter(Login);

 

이 컴포넌트에서 props에 route 정보(history)를 받으려면 export하는 class에 withRouter로 감싸주어야 한다.

이렇게 withRouter같이 해당 컴포넌트를 감싸주는 것을 higher-order component(이하 HOC) 라고 한다.

 

 

 

 

참조: https://yeri-kim.github.io/posts/react-router/

React 6 - React router - Blog by Yeri