전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다.
(전통적인 웹사이트에서는 이와 같이 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다.)
웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰다.
한편, 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다.
1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되었다.
2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것이 싱글 페이지 어플리케이션, SPA이다.
SPA
SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.
SPA의 장점
- 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응한다.
- 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있다.
- 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다
SPA의 단점
- 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거치는데, SPA의 경우 이 JavaScript 파일의 크기가 커서 이를 기다리느라 첫 화면 로딩이 오래 걸린다.
- 검색엔진 최적화가 좋지 않다. 구글과 같은 검색 엔진은 html의 자료를 분석해서 검색 기능을 구동하는데, SPA의 경우 html이 거의 비어있기 때문이다. (다만, SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세이다.)
React Router - SPA를 개발하기 위한 방법
SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하는 것은 아니다. 예를 들어 트위터와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다. 그렇다면 이 화면에 따라 "주소"도 달라진다.이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.
React Router 활용
React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link.이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리를 설치한 후, 따로 불러와야 한다.
npm install react-router-dom@^6.3.0
import {BrowserRouter, Routes, Route} from 'react-router-dom'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요소로 바뀌는 모습을 볼 수 있다.
a 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 한다. 즉, 새로고침 현상이 일어나게 된다.하지만 Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.
Link 의 to 속성을 활용하여 Route 컴포넌트에 설정해 준 path 주소를 연결해 줍니다.
