페이지 라우팅(Page Routing)

router이란?

데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가

 

route + ing

경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말

 

페이지 라우팅 이란?

단순히 어떠한 요청에 따라서 어떤 페이지를 돌려줄지 일컫는 말

 

MPA vs SPA

리액트에서는 MPA(Multi Page Application)가 아닌 SPA(Single Page Application)를 따르게 된다.

MPA는 서버에 페이지 자체를 요청해서 mypage.html을 받아서 보여주게 되는데 

SPA는 서버에게 포스트를 요청하는게 아닌 리액트가 페이지를 업데이트 시킨다. 서버와는 데이터만 주고받게 된다.

리액트는 단일페이지(SPA)로 구성되고 CSR로 페이지를 렌더링 한다.

CSR(Client Side Rendering)이란?

클라이언트 사이드 렌더링은 SPA로, 클라이언트 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는 것
점점 더 복잡해지는 웹페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 많아짐

• 동작과정 : HTML 다운로드-> JS 다운로드 -> JS 실행 -> DATA 서버로부터 받기 -> Content 확인가능

CSR의 장점

• 클라이언트 사이드 렌더링은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기때문에 SSR 보다 조금 더 빠른 인터랙션이 가능
• page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능
• lazy loading을 지원해줌
  lazy loading이란 ? 페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술
  (Ex. 스크롤 내려야만 해당 이미지 보이게 하는 것)
• 서버사이드 렌더링이 따로 필요하지 않기때문에 일관성있는 코드를 작성할 수 있음

CSR의 단점

• Googlebot과 Searchconsole에 검색 노출이 되지 않음 (브라우저가 없기때문에, html만 가져와서 검색에는 뜨지 않음)
• 페이지를 읽고, 자바스크립트를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기구동 속도가 느림

 

routing(다른 주소에 다른 화면을 보여주는 것)을 하기위해 리액트에서는 기본적으로 Routing을 위한 로직이 들어있지 않기 때문에 react-router라이브러리를 이용해서 구현한다. 

설치방법
 
// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

 

리액트에서 <a>태그를 사용하지 않고 react-router을 사용하는 이유

<a> 태그는 일반적으로 페이지를 새로고침하거나 다른 페이지로 이동시키는 링크를 생성하는데 사용된다. 
하지만 리액트에서는 <a> 태그를 사용하면 기본적으로 페이지가 리로딩되기 때문에 SPA의 장점인 페이지 부분갱신을 무효화하게 된다.

 

react-router 종류

1. BrowserRouter

웹 서버가 URL을 처리하고 적절한 페이지를 전달하는 기존의 웹 사이트 라우팅 방식과 비슷하다. 
비유로는 집에서 직접 목적지까지 가는 것 과 같다. 예를 들어, 집주소가 "/home"이고 우리는 "/home"으로 가고 싶다면 직접 주소를 입력해서 목적지에 도착할 수 있다.

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </BrowserRouter>
  );
}​

 

자연스러운 URL구성과 서버 측 라우팅 지원에 장점이 있지만, 서버 설정이 필요하며 404페이지 처리에도 신경을 써야합니다. 

2. HashRouter

URL 끝에 해시 ('#')를 사용하여 라우팅을 처리하는 방식이다.
비유로는 여행지로 가기 위해 먼저 특정 건물로 이동한 후 건물 내부의 안내판을 통해 목적지를 찾는것과 비슷하다.
URL의 일부로 취급되어 브라우저는 페이지 새로고침 없이도 URL이 변경될 때마다 앱의 다른부분을 업데이트 한다. 

import { HashRouter, Route } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </HashRouter>
  );
}​​

서버 측에서 추가 설정이 필요 없고, 간단한 설정만으로 리액트 앱의 라우팅을 처리할 수 있는 장점이 있지만 해시값이 포함되기 때문에 약간의 가독성과 세마틱적인 측면에서 불리할 수 있다.