페이지 라우팅

라우팅이란?

 라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어다.

 "경로를 진행하는 과정"이라고 이해하면 되겠다.

 

  IT 개발자들은 프로젝트를 참여해 진행하다 보면 네트워크 라우팅이라는 말을 자주 듣게 된다.

 사실 라우팅은 반드시 IT네트워크 만을 의미하지는 않으며, 상당히 포괄적인 개념이다.

---

개념

 라우팅은 일상생활에서 쉽게 접할 수 있다.

 미국에 살고 있는 친구에게 스마트폰 메세지를 를 보낸다고 하면 내 폰에서 친구 폰으로 디렉트로 정보가 전달되는 것이 아니라 중간중간 설치된 "라우터"라는 장비를 거치게 된다.

 

 라우터를 거치는 이유는 데이터를 한 번에 전송하기에는 물리적 거리가 멀다. 쉽게 직행 노선이 존재한다면 좋겠지만 직행을 이용하는 횟수가 적다면 굳이 직행 노선을 만들 이유가 없지 않은가?

 

 결국 라우터는 가장 빠른 환승 경로를 찾아 메세지를 전달한다. 정의를 내리자면 "데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 전송하는 과정"이라고 할 수 있다.

---

페이지 라우팅

  페이지 라우팅은 클라이언트의 요청에 따라 적절한 페이지를 반환하거나 찾아가는 일련의 과정이다. 도메인, 경로를 떠올리면 된다. www.naver.com 도메인 뒤에 붙는 /blog, /book 등... 또한 이러한 모습을 path라고 한다.

 저 주소에 맞는 웹페이지(정보)를 보여주는 과정.

---

리액트의 페이지 라우팅

 페이지 라우팅은 웹페이지를 어디서 만드냐에 따라 서버사이드 랜더링과 클라이언트 사이드 랜더링으로 구분한다.

리액트는 클라이언트 사이드 랜더링 방식이다.

 

• 서버 사이드 랜더링

 서버 사이드 랜더링은 검색 엔진을 최적화하며 처음 접속할 때 속도가 빠르다는 장점이 있다. 하지만 클라이언트가 페이지를 이동할 때마다 서버가 새로운 페이지를 생성하기에 접속자가 많다면 그만큼 서버의 부하도 크게 된다는 리스크가 존재한다.

 또한 페이지를 이동할 때마다 브라우저는 서버가 제공하는 페이지를 기다려야 하기 때문에 속도가 느려진다는 단점이 존재 한다.

서버 사이드 랜더링

 

• 클라이언트 사이드 랜더링

 리액트는 SPA 즉, html 파일이 하나뿐인 단일 페이지 어플리케이션 이다.

 html 파일이 하나이기 때문에 서버 사이드가 아닌 클라이언트 사이드 랜더링으로 페이지를 라우팅한다.

 

 클라이언트 사이드 랜더링의 핵심은 사용자가 보는 페이지를 전통적인 웹 서버 제공하는 서버 사이드 랜더링이 아닌 브라우저가 완성한다는 점이다.

 

 브라우저는 처음 접속할 때만 서버에게 데이터를 요청하며, 페이지를 이동할 때는 별도의 요청을 하지 않는다. 여기서 별도의 요청이라는 의미는 정적 파일을 의미한다. 당연히 데이터베이스에서 자료를 꺼내 와서 바인딩하는 것은 다른 의미다.

 

 처음 사이트에 접속할 때는 서버 사이드 랜더링보다 속도가 느리다는 단점이 있다. 하지만 페이지를 이동할 때는 브라우저에서 페이지를 직접 교체하므로 속도가 훨씬 빠르고 서버의 부담이 없다. 굳이 동시에 첫 접속을 수만명이 한다는 가정은 예외로 치자.

 

 어떤 방식이 더 우월하다고 할수 없다. 극 소수의 특정 사용자가 이용하는 기업 내 어플리케이션의 경우 굳이 사용자 경험을 극대화하기 위해 페이스북 스타일의 서비스를 제공할 필요는 없지 않을까? 싶다. 말 그대로 도구는 용도가 적재 적소에 맞게 사용되어야 한다고 생각 된다.

 

 어쨌든 리액트에서 라우터를 사용하려면 설치 해야 한다.

 npm i react-router-dom

 

 프로젝트에서 라우터를 적용하려면,

import { BrowserRouter } from "react-router-dom";

 

BrowserRouter 에는 브라우저의 주소 변경을 감지하는 기능이 내장 되어 있다. 컴포넌트가 페이지를 구성하고 이동하는 데 필요한 기능들을 다양하게 제공한다.