React SPA

규모가 커질수록 사용자와의 상호작용이 많아지고 속도 저하 문제가 발생함에 따라 이 문제를 해결하기 위해 등장한 SPA

SPA 등장배경과 개념 (Single Page Application)

  • 전통적인 웹사이트는 페이지 전체를 로딩하여 시간이 오래걸리는 반면, SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음 (ex. header, navigation, footer)
  • 서버로부터 완전히 새로운 페이지를 불러오지 않고 화면 업데이트를 위해 필요한 데이터만 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식

장점

  • 필요한 데이터만 받아서 업데이트하기 때문에 사용자와의 interaction이 빠름
  • 서버에서 요청받은 데이터만 넘겨주므로 서버 과부하문제가 현저하게 줄어듦
  • 더 나은 유저경험 제공 (전체페이지 렌더링하지 않아도 되기 때문)
  • 대표적인 플랫폼: 유튜브, 페이스북, 지메일, 에어비엔비, 넷플릭스 등

단점

  • SPA의 JavaScript 파일의 크기가 크기때문에 첫 화면 로딩시간이 길어짐 (HTML파일은 거의 비어있고 JavaScript파일에 대부분의 코드가 들어있음)
  • 검색엔진 최적화가 좋지 않음: 검색엔진(구글, 네이버)은 HTML 파일에 있는 자료를 분석하여 검색기능을 구동하지만 SPA의 경우 HTML에는 별다른 자료가 없기 때문 => 검색엔진 최적화를 할 수 있도록 발전하는 중 🚀

WireFrame 와이어프레임

웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대
디자인 전단계에서 선(wire)을 이용해 윤곽선을 잡는 것
페이지 만들기 전에 어떤 컴포넌트를 만들고 어떻게 조합해야할지 구상해야함

React Router

화면에 따라 주소가 달라지고 그에 따른 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다"라고 함 => 라우팅(Routing)

React Router 주요 컴포넌트

routerroute matchersroute changers
<BrowserRouter><Routes> <Route><Link>

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

해당 컴포넌트 불러오는 명령어

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

React Router 사용 환경 세팅

  1. react-router 라이브러리 설치
# simpleroute 폴더에 React App 설치#
npx create-react-app simpleroute
cd simpleroute

# react-router 라이브러리 설치#
npm install react-router-dom@^6.3.0
  1. App.js로 react-router 컴포넌트 꺼내오기
import React from "react":
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
export default function App() {
  return (...)
}
profile
oneThing

0개의 댓글