Section2 / Unit5 : React (SPA)

SPA 등장 배경과 개념

전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면,

브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다.

웹사이트가 보다 복잡해지고 애플리케이션 형태를 가지게 되면서,

사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다.

중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰고,

사용자 입장에서 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었고,

이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었습니다.

1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였습니다. 2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것이 우리가 지금 배우고 있는 싱글 페이지 애플리케이션, 즉 SPA입니다.

 

SPA(Single Page Application)

서버로부터 완전한 새로운 페이지를 불러오지 않고

화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아

브라우저에서 해당 부분만 업데이트하는 방식으로 작동하는 웹 어플리케이션이나 웹 사이트

 

SPA의 장점

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

SPA의 단점

• JavaScript 파일의 크기가 커서 첫 화면 로딩 시간이 길어짐
  -> 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script에 있는 JS파일을 다시 받아오는 과정을 거침
• 검색 엔진 최적화(SEO)가 좋지 않다
  -> 검색엔진 최적화 : 구글이나 네이버 같은 검색 엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것을 의미
  -> 검색 엔진의 작동 방식
  검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동
  검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석합니다.
  SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못합니다.
  이 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고,
  더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어납니다.
  다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세입니다.

Routing

다른 주소에 따라 다른 뷰를 보여주는 과정 -> "경로에 따라 변경한다"

React 자체에는 이 기능이 내장되어 있지 않아서 우리가 직접 주소마다 다른 뷰를 보여줘야 함

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

 

React Router 활용

주요 컴포넌트

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

react-router 라이브러리 설치

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

->  이 명령어를 통해 사용 가능

 

import : 필요한 모듈을 불러오는 역할