📍 SPA
SPA(Single Page Application, 싱글 페이지 애플리케이션)란, 한 개의 페이지로 이루어진 애플리케이션을 의미한다.
전통적인 웹 애플리케이션에서는 사용자가 페이지를 이동할 때마다 새로운 HTML 페이지를 서버에서 요청하여 로드하지만, SPA에서는 처음에 한 번만 HTML 페이지를 로드하고, 이후 필요한 데이터나 콘텐츠만 동적으로 서버에서 가져와서 페이지를 갱신한다.
- SPA
-
전통적인 웹 페이지
- 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있음.
- 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌. 이렇게 사용자에게 보이는 화면은 서버 측에서 준비했음.
사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용하기도 했음.
- 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있음.
-
요즘 웹에서는?
-
제공되는 정보가 매우 많아서 새로운 화면을 보야줘야 할 때, 서버 측에서 모든 뷰를 준비할 경우 성능상 문제가 발생할 수 있음.
-
애플리케이션 내에서 화면 전환이 일어날 때마다 html을 계속 서버에 새로 요청하면 사용자의 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고, 바뀌지 않는 부분까지 새로 불러와서 보여줘야 해서 불필요한 로딩이 있어 비효율적임.
-
👉 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하는 것!
뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용해 업데이트 해 줌.
만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와서 애플리케이션에서 사용할 수도 있음.
❓🤔 싱글 페이지라고 해서 화면이 한 종류일까?
👉 꼭 그런 것은 아니다.
예를 들어... 블로그를 개발한다면 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있을 것!
SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있음.
📍 라우팅
다른 주소에 다른 화면을 보여 주는 것으로 리액트 라우팅 라이브러리로는 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등 여러 가지가 있다.
다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 함. 리액트 라이브러리 자체에 이 기능이 내장되어 있지는 않음. 대신 브라우저의 API를 직접 사용해 관리하거나, 라이브러리를 사용하여 이 작업을 더욱 쉽게 구현할 수 있음.
리액트 라우터는 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 해주며, 사이드 렌더링을 할 때도 라우팅을 도와주는 컴포넌트들을 제공해 줌.
❓🤔 SPA의 단점은?
-
앱 규모가 커지면 자바스크립트 파일이 너무 커진다는 것!
- 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문인데, 드 스플리팅(code splitting)을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있음.
-
리액트 라우터처럼 브라우저에서 자바스크립트를 사용해 라우팅을 관리하는 것은 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 제대로 수집해 가지 못한다는 잠재적인 단점이 따름.
그렇기 때문에 구글, 네이버, 다음 같은 검색 엔진의 검색 결과에 페이지가 잘 나타나지 않을 수도 있음.
-
자바스크립트가 실행될 때까지 페이지가 비어 있어 자바스크립트 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있음.
- 이러한 문제점들은 서버 사이드 렌더링(server-side rendering)을 통해 모두 해결할 수 있긴 함.
