[React]Routing

OnStar·2021년 7월 19일

목록 보기

5/11

SPA란?

여러개의 페이지를 사용하며, 클라이언트가 새로운 페이지를 요구할 때마다 정적 리소스를 다운로드받고 전체 페이지를 다시 렌더링하는 MPA(Multi Page Application) 방식과 달리, 최초에 모든 정적 리소스를 다운받은 후 클라이언트의 새로운 페이지 요청에 대해 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신하는 형태를 말한다.

SPA를 CSR(Client Side Rendering) 방식으로, MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

초기 구동 속도가 느리고 검색 엔진 최적화의 관점에서 불리하다는 단점이 있지만 개발이 용이할 뿐아니라 사용성의 측면에서 유리하다.

라우팅이란?

SPA는 딱 하나의 HTML을 가지고있지만 SPA도 주소창대로 다른 페이지를 보여줄 수 있다. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다.

react-route-dom 라이브러리를 가장 많이 사용한다.

yarn add react-router-dom

react-route-dom 공식문서

라우팅 사용하기

index.js에 BrowserRouter 적용하기

BrowserRouter 적용하기

// react-router v6 에서는 동작하지 않는 코드입니다.

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// <APP /> 을 감싸고있는 <React.StrictMode>를 <BrowserRouter>로 바꾸어준다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js 에서 App을 감싸는 BrowserRouter(브라우저라우터)는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨주는 역할을 한다.
즉, 현재 내가 어떤 주소를 보고 있는지 쉽게 알도록 도와준다.

App.js에서 Route 적용하기

Route 사용방법 1: 넘겨줄 props가 없을 때

<Route path="/주소" component={[보여줄 컴포넌트]}/>

Route 사용방법 2: 넘겨줄 props가 있을 때

<Route path="/주소" render={(props) => (<BucketList list={this.state.list} />)} />

예시

// react-router v6 에서는 동작하지 않는 코드입니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

// Route
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={};
  }
             
  render(){
    return (
      <div className="App">
        <Route path="/" component={Home} />
      	<Route path="/cat" component={Cat} />
     	 <Route path="/dog" component={Dog} />
      </div>
    );
  }
}
export default App;

exact 적용하기

"/" 이 기호가 "/cat"과 "/dog"에도 포함되어 있어 cat과 dog에서 home의 페이지도 같이 렌더링 될 것이다.

이때 아래처럼 exact를 추가하면 / 페이지가 함께 렌더링되지 않는다.

// react-router v6 에서는 동작하지 않는 코드입니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

// Route
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state={};
  }
             
  render(){
    return (
      <div className="App">
        // exact 사용
        <Route path="/" exact component={Home} />
      	<Route path="/cat" component={Cat} />
     	 <Route path="/dog" component={Dog} />
      </div>
    );
  }
}
export default App;

URL 파라미터사용하기

파라미터: /cat/nabi
쿼리: /cat?name=nabi

파라미터 주는 방법

App.js

//App.js
...
// 파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>
...

Cat.js

//Cat.js
import React from "react";

const Cat = (props) => {

    console.log(props.match);

    return (
        <div>파라미터로 받은 고양이 이름 : {props.match.params.cat_name}</div>
    )
}

export default Cat;

링크 이동 시키기

사용하기

링크 컴포넌트는 html 중 a 태그와 비슷한 역할으로 리액트 내에서 페이지 전환을 도와준다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// Route, Link 컴포넌트
import { Route, Link } from "react-router-dom";

import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {

  constructor(props){
    super(props);
    this.state={};
  }
  
  render(){
    return (
      <div className="App">
        <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

        <hr />
        
        <Route path="/" exact component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
      </div>
    );
  }
}

export default App;

history 사용하기

Link 컴포넌트를 클릭하지 않고, 조금 더 함수를 사용한 페이지 전환 방법

withRouter 설정
→ history 객체를 props로 받아오려면, withRouter를 설정해줘야한다.

...
import { withRouter } from "react-router";
...
// ! 내보내는 부분에서 withRouter로 감싸준다.
export default withRouter(App);

예시

// react-router v6 에서는 동작하지 않는 코드입니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
// withRouter 불러오기
import { withRouter } from "react-router";

import { Route, Link } from "react-router-dom";

import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

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

  componentDidMount(){
    console.log(this.props);
  }

  render(){
    return (
      <div className="App">
        <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

        <hr />

        <Route path="/" exact component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
        
        <button onClick={() => {
          // props에 있는 history 사용
          // push([이동할 주소])는 페이지를 이동시켜 준다.
          this.props.history.push('/cat');
        }}>
          /cat으로 가기
        </button>
        <button onClick={()=>{
          // goBack() 뒤로가기
          this.props.history.goBack();
        }}>뒤로가기
        </button>
      </div>
    );
  }
}
// ! 내보내는 부분에서 withRouter로 감싸준다.
export default withRouter(App);