SPA(Single-Page-Application)
우선 SPA 라는 방식이 있다. 말 그대로 하나의 웹 애플리케이션, 웹 사이트가 하나의 페이지로 이루어지는 방식이다. 처음 이 말을 들으면
🧐 엥 어떻게 웹 사이트가 페이지 한개로 만들어져? 페이지가 엄청 많이 필요하지 않나? 라는 생각이 든다.
이 말을 이해하기 위해서 우선 전통적인 웹 사이트를 생각해보자.
SPA의 등장 배경
그림 왼쪽의 전통적인 웹사이트에서는 페이지를 이동할 때 매번 html로 페이지 전체를 불러와야 했다.
그러나 사용자와 서비스 사이에 점점 더 많은 상호 작용이 생기는 쪽으로 발전했고, 중복되는 요소들(header, footer, 메뉴 창 등등)을 매번 불러오는 것은 서버와의 불필요한 트래픽을 발생 시켜 더 느린 반응성을 유발한다.
👏 SPA의 등장
그래서 페이지를 전환해도 중복되는 부분은 새로 불러오지 않는 방식인 SPA가 만들어졌다.
SPA 방식의 웹 사이트에서는 업데이트에 필요한 데이터만 서버에서 전달 받고,
→ javascript가 이 데이터로 html 요소를 동적으로 생성해서 → 화면에 보여준다.
👏 SPA의 장점
- 사용자와의 인터랙션에 빠르게 반응한다.
- 서버에서는 요청 받은 데이터만 클라이언트에게 넘겨주기 때문에 서버 과부화 문제가 적다.
- 전체 페이지를 렌더링할 필요가 없어 더 나은 유저 경험을 제공한다.
🥲 SPA의 단점
- javascript가 html 정보까지 갖고 있기 때문에 javascript 파일의 크기가 크다.
첫 화면이 로딩되는 시간(=javascript 파일을 기다리는 시간)이 길어진다.
→ 코드 spliting을 통해 해결한다. - SEO(검색 엔진 최적화)가 좋지 않다.
SPA에서 html 파일에는 뼈대만 존재한다. 하지만 검색 엔진은 html 파일에 있는 자료를 분석하는 방식으로 구동된다.
React SPA 장점
SPA로 웹 애플리케이션을 개발할 때 React를 사용함으로써 얻을 수 있는 장점들이 있다.
📌 1.Performance
이전에 사용하던 JQuery 같은 js 프레임워크들은 사용자가 웹 애플리케이션과 상호작용할 때마다 HTML DOM에 직접적으로 영향을 끼쳤다. 하지만 위 그림에서도 볼 수 있듯이 리액트는 virtual DOM을 만들어서 사용자와 인터랙션한다. 따라서 HTML 문서는 건들이지 않게 되고 이는 성능 향상으로 이어진다!
📌 2.Small-sized library
ReactJS는 불필요한 라이브러리들을 내장하지 않고 가볍다.
📌 3. UI components
ReactJS의 가장 강력한 장점이다. 유저 인터페이스를 작게 분해하고 이것들을 재사용이 가능한 컴포넌트로 만드는 방식은 아주 복잡한 웹 사이트들을 더 빠르고 쉽게 만들 수 있게 해준다! 게다가 유지 보수도 쉬워진다.
React Router
지금까지 SPA에 대해서 알아봤는데 실제로 React SPA 방식을 사용한다고 하더라도 만들어야 할 웹 애플리케이션은 매우매우 복잡하고 다양한 데이터를 보여주어야 한다.
그래서 여러 view들에 알맞은 url을 통해 접근할 수 있게 하는데, 이렇게 주소에 따라 다른 뷰를 변경해 보여주는 과정을 Routing이라고 한다.
React 자체에는 라우팅 기능이 없기 때문에 라이브러리를 사용한다.
react-router-dom
npm install react-router-domreact router 라이브러리를 설치한다.
import { BrowseRouter, Routes, Route, Link } from "react-router-dom";react-router-dom에서 필요한 모듈들을 불러온다.
