3.23 React SPA

👾React SPA 등장 배경

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다.

종이 한장을 통째로 불러오는 식으로 됨

 

HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다.

이것이 우리가 지금 배우고 있는 싱글 페이지 애플리케이션, 즉 SPA입니다. Single Page Application 

레고 한개씩 갈아끼우는형식으로 부분적으로 업데이트 됨

 

👾SPA의 단점

첫 화면 로딩 시간이 길다
첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다.
때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.

검색 엔진 최적화 SEO 가 좋지 않다.
검색 엔진은 검색 로봇이 웹 페이지에 있는 HTML  문서 내의 각종 태그나 링크 등을 분석해서 작동하는데 SPA의 경우 HTML이 거의 비어있다 보니 검색 로봇이 충분히 자료를 수집하지 못한다.

이 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고, 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어납니다.

다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세입니다.

 

👾Wireframe

Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 

이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.

자, 이제 유튜브 개발자인 여러분은 React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다고 상상해 봅시다. 컴포넌트 기반 개발 방법을 학습하였기 때문에, 페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획입니다.

먼저 화면 상단의 경우, 상단 전체를 아우르는 Header라는 컴포넌트가 있고, 그의 자식으로 Search와 Setting이라는 컴포넌트를 만들기로 하였습니다. 
Header 컴포넌트는 애플리케이션 내의 어떤 페이지에 가더라도 늘 상단에 위치하니 이 부분을 감안해서 설계 로직을 작성해야겠다고 생각했습니다.

화면 중앙에는 크리에이터들이 올린 영상을 담고 있는 ContentsList라는 컴포넌트가 있고, 그 안에는 동일한 형태를 가진 영상물들이 반복적인 형태로 화면을 구성하고 있기 때문에 Content라는 컴포넌트를 한 번만 만들어 재사용하기로 하였습니다.

가장 작은 단위의 컴포넌트를 한번 분석해 봅시다. 한눈에도 다양한 정보를 담고 있는 Content 컴포넌트를 한번 살펴보기로 하죠. 
Content 컴포넌트는 상단에는 썸네일, 중앙에는 아바타와 영상 소개 글, 하단에는 채널 이름과 조회 수, 업로드한 날짜가 기재되어 있습니다.

Content 컴포넌트는 영상과 관련된 데이터를 입력받아, UI에 맞게 화면에 출력해 줍니다. 더불어 눈에 보이지는 않지만 클릭 시 해당 영상을 재생해 주는 기능도 가지고 있습니다.

 

컴포넌트가 UI의 필수 요소란 정의도 맞고, 각자 고유의 기능을 가지고 있다는 정의도 맞습니다. 하지만 조금 더 고차원의 React 개발자라면, 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 합니다. 

 

👾라우팅(Routing)

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용합니다.

 

👾React Router 활용

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link입니다.

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 합니다. 다음 명령어를 통해 사용할 수 있습니다.

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.
본격적으로 해당 컴포넌트들을 이용해서 라우팅을 하도록 하죠.

 

1. 개발 환경 구축하기

터미널을 열고 다음 명령어를 실행하여 simpleroute 디렉토리에 React 프로젝트를 생성합니다. 실행 후 npm start를 통해 실행 결과가 잘 나오는지 확인해 주세요.

npx create-react-app@latest simpleroute
cd simpleroute
npm start

Create React App 프로젝트가 잘 생성되었다면 이제 React Router를 설치할 차례입니다. 아래 명령어를 실행합니다.

npm install react-router-dom@^6.3.0
# 이번 스프린트에서는 6.3.0 버전을 사용합니다

라이브러리가 잘 설치되었다면, package.json 파일의 dependencies 항목에 react-router-dom 이라는 라이브러리가 등록된 것을 확인하실 수 있습니다.

 

이제 App.js 파일로 가서 최상단에 React Router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅을 진행합니다. React Router 슬라이드에서 어떻게 이 컴포넌트들을 사용할 수 있는지 배웠습니다!

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // 이 구문을 넣어주세요

React Router를 사용하여 SPA를 구현하기 위한 모든 준비가 완료되었습니다. 본격적으로 라우트 컴포넌트를 만들어봅시다.

 

 

👾BrowserRouter

<BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다. 또한 <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다.

👾Routes, Route

경로를 매칭해주는 역할을 하는 컴포넌트입니다.

• <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. <Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.
• <Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

👾Link

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

ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀌는 모습을 볼 수 있습니다.

React Router에서 <a> 요소가 아닌 <Link>를 사용하는 이유가 있나요? <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 되죠. 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있습니다.

•  

 

💁‍♀️ React Router DOM에서 사용되는 BrowserRouter, Link, Routes, Route에 대한 설명으로 틀린 것을 고르세요.

 

A. Link 컴포넌트는 해당 컴포넌트를 클릭할 때, Route의 path와 일치하는 페이지로 이동할 수 있게 해주는 컴포넌트이다.

B. BrowserRouter는 React Router DOM이 사용되는 부분의 최상위 컴포넌트로 위치해야 한다.

C. Route 컴포넌트는 Routes 컴포넌트의 자식 컴포넌트가 되어야 한다.

D. path 를 “*”로 설정하면 “/”와 같은 경로로 이동한다.

 

🔈 해설

정답 D

만약 사용자가 지정된 주소인 “/’, “/mypage”, “/dashboard” 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있습니다. 이럴 때 사용할 수 있는 속성이 path=”*”입니다. 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 됩니다.

 

 

---