TIL - 2022.11.28

React SPA

학습내용

• SPA(Single-Page Application)란?
• 와이어프레임과 목업
• React Router를 통한 SPA 구현

SPA 등장 이전의 웹 어플리케이션 문제점

과거에는 사용자가 페이지를 이동할때마다 브라우저가 페이지를 보여주기 위해 매번 HTML 페이지 전체를 불러와야 했었습니다. 이에 따라 아래와 같은 문제점이 발생했습니다.
1. 페이지 전체가 다시 출력되는 과정에서 화면이 깜박이는 현상이 발생
2. header, footer와 같은 페이지마다 중복되는 요소를 서버에 요청하여 불필요한 트래픽 발생과 3. 이에 따른 페이지의 느린 반응성으로 사용자 경험 저하 발생

이러한 문제점을 극복하기 위해 SPA(Single Page Application)이 등장하였습니다.

SPA(Single Page Application)?

SPA(Single Page Application)는 매번 모든 페이지를 서버에 요청하는 것이 아닌, 화면을 업데이트하기 위해 필요한 데이터만 요청하여 자바스크립트가 브라우저에 해당 부분만 업데이트하는 웹 어플리케이션을 말합니다.

SPA 장점

• 브라우저에서 전체 화면이 아닌 부분 업데이트만 진행하기 때문에 사용자와의 Interaction에 빠르게 반응
• 서버에 필요한 데이터 부분만 요청하기 때문에 서버 과부하를 줄일 수 있음
• 이에 따라 보다 빠른 반응성으로 더 나은 사용자 경험을 제공

SPA 단점

• 무거운 javascript인해 최초 로딩 시간이 길어짐
• 동적으로 생성되기 때문에 HTML에 내용이 없어 검색엔진이 적절하게 동작하기 못합니다. 그렇기 때문에 검색 엔진 최적화(SEO)에 좋지 못함
• 페이지 이동의 앞으로/뒤로 가기 등의 별도 상태 관리에 따른 개발 복잡도 상승

---

React Router 라이브러리

React Router는 React에서 라우팅하기 위해 가장 많이 사용하는 라이브러리입니다.

Routing?

라우팅(Routing)이란 다른 주소에 따라 다른 뷰를 보여주는 과정

React Router 컴포넌트

• router: <BrowserRouter>
• route matchers: <Routes>, <Route>
• route changers: <Link>

설치명령어

npm i react-router-dom

참조: npm - React Router Dom

---

Wireframe과 Mockup 차이

Wireframe이란?

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

Mockup이란?

목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말함