SPA (Single Page Application)

Computer Science

Yuna_dev 2021. 6. 23. 00:21

SPA를 이해하려면 우선 서버와 클라이언트의 관계를 이해해야 한다.

User가 서버에 html 을 요청하면 서버에서 모든 html을 보내주었던 방식이 전통적인 서버 사이드 방식이다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 렌더링을 하면 속도가 느려지고 트래픽도 낭비된다.
그래서 최근에는 클라이언트 사이드 방식으로 우선 애플리케이션을 브라우저에 로드한 다음 필요한 데이터만 서버에서 전달받아 다시 렌더링을 한다.

이러한 클라이언트 사이드 방식은 SPA에서 사용되는 방식이고, SPA 구현에 리액트가 사용될때 라우터가 필요하다. 라우터를 이해하기 위해 먼저 SPA가 무엇인지 알아보겠다.

SPA는 Single Page Application 의 약자로, 페이지가 1개인 어플리케이션이란 뜻이다.
SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드한다. 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체 트래픽 감소와 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
SPA의 핵심가치는 사용자 경험 향상에 있으며 애플리케이션 속도의 향상도 기대할 수 있다.
그러나 단점도 있는데, 앱의 규모가 커지면 JS 파일 사이즈가 커진다는 점이다. 이로 인해 초기구동속도가 상대적으로 느리고, 검색엔진 최적화의 문제가 있다.

SPA가 싱글 페이지라고 하지만 한종류의 화면만 있다는 말은 아니다. 기능별로 페이지를 나눠서 만들수 있는데, 페이지 별로 주소가 있어야한다. 다른 주소에 따라 다른 뷰를 보여주어야 하기때문이다.
주소에 따라 다른 뷰를 보여주는 것을 라우팅이라고 하는데, 리액트 자체에는 이 기능이 내장되어 있지 않는다. 따라서 유저가 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다.
react-router 은 공식 라우팅 라이브러리는 아니지만 현재 가장 많이 사용되고 있는 라이브러리로, 라우팅을 간단하게 해준다. 따라서 리액트에서 필수적인 라이브러리다.
SPA 라우팅의 과정은 다음과 같다.
1. 브라우저에서 최초에 '/' 경로로 요청을 하면,
2. React Web App 을 내려줍니다.
3. 내려받은 React App 에서 '/' 경로에 맞는 컴포넌트를 보여줍니다.
4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,
5. 새로운 경로에 맞는 컴포넌트를 보여줍니다.

화면을 구성하는 요소에 변화가 일어났을 때, 서버에서 모든 파일을 다시 렌더하여 새로 보내주는 방식이 아닌 변화가 일어난 요소만을 다시 렌더하는 방식이기 때문에 속도가 빠르고 재사용성이 높다.
서버 트래픽을 아낄수 있으므로 결국은 비용을 아낄수 있다.
빠른 퍼포먼스와 더불어 개발자들이 더 빨리 프론트엔드를 구축할 수 있게 한다.
사용자 경험을 향상시킨다.

SPA로 구현하게 되면 페이지당 state관리가 아닌 전체 application의 state를 가지고 있어야 하는데 관리해야 할 전체 데이터의 양이 크고, state깊이가 엄청 깊어질 수 있다.
state 관리를 위한 라이브러리를 사용한다해도 거의 모든 state변화에 따른 Event를 따로 정의해서 만들어야 하기 때문에 꽤 번거로운 작업이 될 수 있다.

SPA 방식을 사용하면 기본적으로 페이지 로드가 없고, 모든 페이지는 주소창에 으해 렌더링만 변화될 뿐이다. 그래서 언제 새로운 데이터를 불러와야 할지를 정해서 구현해야 한다.