React-SPA (feat. React Router )

• SPA = Single Page Application

 

전통적인 웹 방식은 전체 페이지를 리로드를 하게 된다. 

이러한 방식은 매번 전체의 파일을 요청을 하게 되니, 서버의 과부하가 걸릴 수 있게 되며,

효율도 상당히 떨어지게 된다. 그래서 등장한게 SPA 방식이다.

 

SPA 방식은 중복되는 부분은 새로 불러오지 않고, 필요한 부분만 업데이트가 되게 하는 방식이다. 

필요한 부분만 업데이트가 되기 때문에 이전의 방식보다 과부하로 인한 문제를 줄일 수 있게 된다.

하지만 이런 SPA 방식에도 단점이 있으니,

 

첫번재째 단점은 바로 JavaScript 파일의 비중이 너무 높기 때문이다.

브라우저는 HTML 을 파싱하기 시작하는데, SPA방식은 HTML 코드는 대부분 비어있고, JavaScript 코드가

( TMI : script 태그를 만나면 이전의 파싱을 멈추고 script 파일을 먼저 읽는다. ) 

많다 보니 script 파일을 읽는 과정이 오래 걸리게 된다. 이때 사용자가 느끼기엔 첫 페이지 로딩시간이 오래걸린다고

느낄 수 있다. 

 

두번째 단점은 검색엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 등등의 포털사이트에선 로봇?을 보내 HTML 파일의 

자료를 분석하게 된다. 이때 분석한 데이터를 바탕으로 자료를 볼 수 있게 되는데, HTML코드가 거의 없으니 적절한

검색엔진에 자료를 볼 수 없게 되는 경우가 생길 수 있다. 

 

• React Router

SPA 를 통해 우리는 화면에 하나의 컨텐츠만 있다고 볼 수 있지만 사실 하나만 있는것이 아니다. 

예를들어 기본 화면이 있고, mypage, about 이렇게 3개의 컴포넌트가 있다고 했을 때,

localhost:3000 페이지에선 기본화면이 나올 것이고, localhost:3000/mypage(port) 에선 mypage 컴포넌트가 보일 것이다.

이처럼 주소에 따라 보여지는게 달라지는데, 이런 과정을 경로에 따라 변경한다라는 의미로 라우팅( Routing ) 이라고 한다.

 

Router 를 사용하려면 먼저 npm 을 통해 react-router-dom 을 먼저 install 해주고,

필요한 모듈을 불러와야 한다. 

ex. import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

 

Router 에는 몇가지 주요 컴포넌트가 있다. { <BrowserRouter> <Routes> <Route> <Link> }

 

<BrowserRouter> : 라우터의 역할을 해준다.

 

<Routes> : 여러 <Route> 를 감싸주는 역할을 한다. 감싼 라우터중 경로가 일치하는 단 하나의 라우터만 랜더링 해주는 역할이다.

( 해당 컴포넌트를 사용하지 않으면 매칭되는 모든 요소를 랜더링 한다. )

 

<Route> : path 요소를 지정해서 해당 path에 어떤 컴포넌트를 보여줄지 정한다. 

( Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동한다. )

 

<Link> : 경로를 연결해주는 컴포넌트 이다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해준다. 

( a태그는 클릭시 페이지를 리로드 시킨다. 여기서 a태그를 안쓰는 이유가 생긴다. )