SPA (Single Page Application)
서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다.
SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소상태에 따라 다양한화면을보여준다.
다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 한다. 리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않지만 브라우저의 API를 직접 사용하여 관리하거나, 라이브러리를 사용하여 구현할 수 있다.
리액트 라우팅 라이브러리는 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등 여러가지가 있다.
리액트 라우터는 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 해준다. 서버 사이드 렌더링을 할 때도 라우팅을 도와주는 컴포넌트들을 제공해 주고있다.
SPA의 단점
- 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다.
- 페이지 로딩시 사용자가 실제로 방문하지 않을수도 있는 페이지의 스크립트도 불러오기 때문이다. 하지만 이건 코드 스플리팅을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩속도를 개선할 수 있다.
- 자바스크립트를 사용하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집하지 못한다는 단점이 있다. 그렇기 때문에 구글, 네이버, 다음 같은 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수도 있다.
- 이러한 문제점들은 서버 사이드 렌더링(server side rendering)을 통해 모두 해결할 수 있다.
리액트 라우터(React-Router)
리액트에서는 경로에 따라 다른 뷰를 보여줄 수 있다. 이때 사용하는 라이브러리가 리액트라우터이다.
리액트 라우터는 크게 3가지로 나누어서 볼 수 있다.
1. 라우터 역할을 하는 BrowserRouter
: 컴포넌트의 최상위에 있어 리액트 라우터의 컴포넌트를 활용할 수 있도록 한다.
2. 경로를 매칭해주는 Routes, Route
: Routes컴포넌트가 경로가 일치하는 하나의 Route만 렌더링한다. Route 컴포넌트 안에는 path속성과 element속성이 존재하는데 이 속성들이 경로와 그 경로에 일치하는 컴포넌트를 매칭해준다.
3. 경로를 변경해주는 Link
: a태그와 비슷한 역할을 하는 Link컴포넌트이다. 누르면 화면(경로)를 변경해주는 역할을 한다. a태그는 페이지 전환시 처음부터 렌더링 시키는 새로고침을 하지만 Link는 페이지 전환을 방지하는 기능이 내장되어 있다. 따라서 SPA구현에 적합하다고 한다.
