React SPA
웹페이지에서는 페이지를 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달받아와서 렌더링을 했습니다.
하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라, 속도 저하 등의 문제가 발생하게 됩니다. React에서는 이러한 문제를 해결하기 위해 SPA를 사용하고 있습니다.
SPA의 등장 배경
전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다.
하지만 SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않습니다.
전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현합니다.
전통적인 웹사이트의 단점
웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다.
하지만 이때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다.
한편, 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었습니다.
1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다.
2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것이 우리가 지금 배우고 있는 싱글 페이지 애플리케이션, 즉 SPA입니다.
SPA의 개념
SPA(Single Page Application)
- 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.
SPA의 장점
-
전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 interaction에 빠르게 반응합니다.
-
서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어듭니다.
-
전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저 경험을 제공합니다.
ex) Youtube, facebook, Gmail , airbnb등
SPA의 단점
1. SPA의 경우 JS파일의 크기가 큽니다.
2. JS파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 깁니다.
(브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거칩니다.)
즉 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다.
때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.
3. 검색 엔진 최적화(SEO)가 좋지 않습니다.
(구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동합니다.)
하지만 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 작동하지 못합니다.
Wireframe
Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다.
이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 그리고 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.
즉 리액트를 이용해 어떻게 만들지 설계하는 과정에서
컴포넌트 기반 개발 방법을 학습하였기 때문에,
페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들고 이들을 조합할지 구상해야 합니다.
React Router
React SPA에서는 경로에 따라 다른 뷰를 보여줄 수 있습니다. 라우팅에 따라 다른 뷰를 보여주기 위해서 React에서는 React Router라는 라이브러리를 많이 사용합니다.
SPA & Routing
SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않습니다.
예를 들어 Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있습니다.
또한 화면에 따라 "주소"도 달라집니다.
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변한다" 라는 의미로 라우팅(Routing)이라고 합니다.
하지만 리액트에는 이 기능이 내장되어 있지 않습니다.
그래서 우리가 직접 주소마다 다른 뷰를 보여줘야 합니다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용합니다.
React Router 활용
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link입니다.
이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 합니다. 다음 명령어를 통해 사용할 수 있습니다.
impoer { BrowserRouter, Routes, Route, Link} from "react-router-dom";Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.
React Intro에서 배운 create-react-app으로 React 프로젝트 환경을 만들 수 있습니다. 그 환경에 React Router 라이브러리도 설치할 수 있죠!
npm 명령어를 통해 간단하게 설치할 수 있습니다.
npm install react-router-dom@^6.3.0환경세팅
<BrowerRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">Mypage</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Routes>
<Route path"/" element={<Home />} />
<Route path"/about" element={<Mypage />} />
<Route path"/dashboard" element={<Dashboard />} />
</Routes>
</div>
</BrowerRouter>