React - Router (v5)

React Router

시작하기 전에 잠깐 알고 넘어가자!

1. 라우팅이란 ?! 

간단히 말해 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다.

---

2. SPA와 MPA

 

SPA란 ?!

Single Page Application으로 페이지가 한 개인 웹 어플리케이션을 의미하며, 

CSR(Client Side Rendering)방식으로 렌더링한다.

SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 데이터만을 넘겨주어, 첫 요청시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용한다. 

 

MPA란 ?!

Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며,

SSR(Server Side Rendering)방식으로 렌더링한다.

MPA는 서버에 새로운 페이지를 요청할 때마다, 신규 페이지를 불러와 페이지 리소스가 다운로드 되어 그에 맞춰 전체 페이지를 다시 렌더링한다.

---

라우팅 관련 라이브러리가 많이 있지만, React Router는 현재 가장 많이 사용되는 써드파티 라이브러리이다. 

 

리액트는 SPA 방식으로 구성되어 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만을 가져오는 형태를 가진다.

React Router는 페이지를 새로 불러오지 않는 상황에서 선택된 데이터를 하나의 페이지에서 렌더링 해준다.

---

 

React Router 설치

npm i --save react-router-dom@5   // @숫자 : router 버전

 

React Router 사용해보기

App.js

//App.js

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Nav from './nav/nav'
import Calculator from './nav/Calculator/Calculator'
import Comment from './nav/Comment/comment'
import Join from './nav/Join/join'
import Home from './nav/Home/Home'
import Footer from './footer/footer'

class App extends Component {
    render() {
        return (
            <div>
                <Nav/>
                <hr/>
                <Route exact path='/' component={Home}/>
                <Route path='/Calculator' component={Calculator}/>
                <Route path='/Comment' component={Comment}/>
                <Route path='/Join' component={Join}/>
                <hr/>
                <Footer/>
            </div>
        )
    }
}

export default App

• 라우트를 설정할 때에는 Route 컴포넌트를 사용하고, 경로는 path 값으로, component에는 보여줄 컴포넌트 값을 넣어준다.
• exact는 주어진 경로와 일치해야지만 설정한 컴포넌트를 보여주는 키워드이다.
  • exact 속성을 주지 않은 상태에서 "/Join" 주소로 이동하면 "/Join"안에 "/"가 포함되기 때문에 Home 컴포넌트와 Join 컴포넌트가 동시에 render된다.

 

index.js

//index.js

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';

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

 

---

라우트(URL) 이동하기

Link

• 지정한 라우트로 이동시키는 링크를 생성하여 링크를 클릭하면 설정해둔 라우트로 이동한다.
• a 태그와 같지만 SPA 특성상 a 태그처럼 새로고침이 발생하면 안되기 때문에, a 태그를 기반으로 기능상의 개선을 통해 새로고침 없이 다른 뷰를 렌더하기 위해 사용한다.
• 도메인이 다른 링크로 이동할 시에는 사용해도 무관하며 JavaScript 내에서 이동하려면 location을 사용하면 된다.

NavLink

• 네비게이션 링크를 생성한다.
• 링크와 똑같이 동작하나, activeStyle을 사용하여 생김새를 지정할 수 있다.
  1. color : 링크 클릭 시 설정되는 색상
  2. fontSize : 링크 클릭 시 설정되는 폰트 크기

props.history.push

• history.push('/인자') 함수에 인자를 넣어주면 해당 인자로 URL을 새로고침 없이 이동시켜준다.

 

---

React Router의 history, match, location

Router Props

• 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지의 기록을 알 수 있기 때문이다.
• 브라우저와 React-Router가 연결 되면 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다.

 

history (React-Router-dom)

• 브라우저의 history API에 접근한다. 대표적으로 history.push로 원하는 컴포넌트로 이동이 가능하다.
  • length : [number] 전체 history 스택의 길이
  • action : [string] 최근에 수행된 action (PUSH, REPLACE or POP)
  • location : [JSON object] 최근 경로 정보
  • push(path, [state]) : [function] 새로운 경로를 history 스택으로 push하여 페이지를 이동
  • replace(path, [state]) : [function] 최근 경로를 history 스택에서 replace하여 페이지를 이동
  • go(n) : [function] : history 스택의 포인터를 n번째로 이동
  • goBack() : [function] 이전 페이지로 이동
  • goForward() : [function] 앞 페이지로 이동
  • block(prompt) : [function] history 스택의 PUSH/POP 동작을 제어

 

그런데 잠깐 ~~!

window에서도 history가 존재한다..!!

 

💡 window.history

window 객체의 history 읽기 전용 속성은 History 객체 (브라우저)로의 참조를 반환한다.

History 객체는 브라우저의 세션 기록 (현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용한다.

보안상의 문제로, History 객체는 세션 기록 내 다른 페이지의 URL을 알 수 없다. 그러나 세션 기록을 탐색하는 것은 할 수 있다.

window.history 객체와 동일하게 주소값을 인자로 넘겨주면 해당 주소로 이동 할 수 있으며, SPA 특성을 지키기 위해 페이지 전체를 리로드 하지 않는다.

 

match

• Route path와 URL 매칭에 관한 정보가 담겨 있다. 대표적으로 match.params로 path에 설정한 파라미터 값을 가져올 수 있다.
  
  • path : [string] 라우터에 정의된 path
  • url : [string] 실제 클라이언트로부터 요청된 url path
  • isExact : [boolean] true일 경우 전체 경로가 완전히 매칭될 경우에만 요청을 수행
  • params : [JSON object] url path로 전달된 파라미터 객체

 

location

• 현재 페이지의 정보를 가지고 있다. 대표적으로 location.search로 현재 url의 쿼리 스트링을 가져올 수 있다.
  • pathname : [string] 현재 페이지의 경로명
  • search : [string] 현재 페이지의 hash 값 (URL의 query string을 가져올 수 있다.)
  • ash : [string] 현재 페이지의 hash 값