react 페이지를 관리해주는 router 알아보기

라우팅이란 페이지를 나눠주는 것이다.

 

우리가 React로 작업을 할 때

create-react-app을 이용하든 웹팩을 이용하든

html 파일은 index.html 하나뿐이라는 것을 알 것이다.

이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우

우리는 이것을 SPA(Single Page Application)이라 부른다.

 

이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다.

페이지를 이동하거나 웹사이트 내에 정보가 달라지게 되면 리다이렉트(새로고침)가 일어나게 되는데

만약에 페이지가 여러개이면 html 파일이 수시로 교체가 되고 서버에서 주는 데이터도 바뀌다 보니까

상태 유지도 어렵고 바뀌지 않은 부분까지 새로 불러오게 되니 비효율적입니다.

(ex : facebook에서 좋아요 버튼 눌렀다고 페이지가 자동으로 새로고침이 되면 불편하겠죠?)

 

그래서 React는 Router를 이용해서 SPA를 유지한 채 여러 개의 페이지를 제어하게 만드는 겁니다.

 

사용방법은 간단합니다

 

router의 모듈을 터미널에 입력한 후

 

npm install --save react-router-dom
yarn add react-router-dom

 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom"

import App from './route/App';
ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
  document.getElementById('root')
);

 

 

먼저 index.js 파일에 App을 브라우저 라우터로 감싸줍니다.

브라우저 라우터는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨줍니다.

App내의 모든 컴포넌트들의 props는 주소 관련 정보를 갖게 된다.

 

import React, { Component } from "react";
import { render } from "react-dom";
import {
  Route,
} from "react-router-dom";
import Cat from "./Cat";
import Dog from "./Dog";
import Home from "./Home";

class App extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    componentDidMount(){ 
        console.log(this.props);
    }

    render(){
        return (
            <div className="App">
                <Route exact path="/" component={Home}/>
                <Route path="/cat" component={Cat}/>
                <Route path="/dog" component={Dog}/>
            </div>
        )
    }
}

export default App;

 

 

이렇게 각각 컴포넌트 별로 path를 주면 된다.

 

왼쪽부터 http://localhost:3000/ 입력시, http://localhost:3000/cat 입력시, http://localhost:3000/dog 입력시

 

 

그렇지만 사용자는 일일이 url을 입력해서 페이지를 이동하지 않는다.

그래서 a태그처럼 click 하면 페이지가 이동되는 Link함수나

아까 브라우저 라우터로 인해 props로 받았던 것 중에 history.push()를 사용하여
페이지 이동 로직을 함수처럼 사용할 수 있다. 

history 객체를 props로 받아오려면 withRouter를 설정하는 것을 잊지 말자

 

 

import React, { Component} from "react";
import { render } from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";
import { withRouter } from "react-router";
import Cat from "./Cat";
import Dog from "./Dog";
import Home from "./Home";

class App extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    componentDidMount(){ 
        console.log(this.props);
    }

    render(){
        console.log(this.props);
        return (
            <div className="App">
                <div>
                    <Link to="/">Home으로 가기</Link>
                    <Link to="/cat">Cat으로 가기</Link>
                    <Link to="/dog">Dog으로 가기</Link>
                </div>
                <Route exact path="/" component={Home}/>
                <Route path="/cat" component={Cat}/>
                <Route path="/dog" component={Dog}/>
                <button onClick={() => {
                    this.props.history.push('/cat');
                }}>/cat으로 가기</button>
                <button onClick={() => {
                    this.props.history.goBack();
                }}>뒤로가기</button>
            </div>
        )
    }
}

export default withRouter(App);

 

 

코드 실행 결과

이렇게 Router를 설정하면 주소가 바뀌어도 보여줄 컴포넌트가 달라져도

페이지가 리다이렉트 되지 않는다.

 

최대한 리다이렉트를 방지하고 바뀌는 부분만 바꿔주는 것이

React를 쓰는 중요한 이유이므로 확실하게 알아야 하는 개념이다.

 

또한 다행히도 react나 hooks나 router문법은 똑같다.