React SPA

https://ko.reactjs.org/

SPA의 등장 배경과 개념

지금까지의 웹사이트는 페이지 이동 시 매번 '페이지 전체'를 불러와야 했고 이는 사용자와 서비스 사이의 상호작용이 증가되어 트랙픽 증가와 사용자 경험의 저하를 야기했다.

하지만, SPA가 등장한 이후로 업데이트가 필요한 부분만 새로 불러오는게 가능해졌다.HTML 문서 전체가 아니라 필요한 부분만 데이터만 받아, JavaScript가 데이터를 조작하고 HTML 요소를 생성하여 화면에 보여주는 방식은 싱글 페이지 애플리케이션이 2000년대 중반부터 보편화됐다.

즉,SPA(Single Page Application)이란, 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.

SPA의 장점과 단점

장점

• 전체 페이지가 아닌 필요한 부분의 데이터만 받아 화면에 업데이트하기 때문에 사용자와의 interaction에 빠르게 반응한다.
• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

단점

• SPA 경우 JavaScript 파일의 크기가 크다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.
• 검색 엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.

React Router

다른 주소에 따라 다른 화면을 보여주는 과정을 경로에 따라 변경한다는 의미로 라우팅(Rounting)이라고 한다. 하지만 React 자체에는 이러한 기능이 내장되어 있지 않아 우리가 직접 주소마다 다른 뷰를 보여주도록 지정해야 한다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.

React Router 주요 컴포넌트

• <BrowserRouter> : 라우터 역할
• <Routes> : 경로를 매칭하는 역할
• <Route> : 경로를 매칭하는 역할
• <Link> : 경로를 변경하는 역할

설치 명령어

npm install react-router-dom@^6.3.0

import 구문

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