[React] SPA 란?

 

 

SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션

 

전통적인 웹 방식(SSR : 서버 사이드 렌더링) 은 사용자가 다른 페이지로 이동할 때마다 새로운 html 을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주는 방식이었다. 즉, 사용자에게 보여주는 화면은 서버에서 준비했다. 이처럼 전통적인 웹 대부분은 서버 사이드 렌더링 방식이다. 그러나 요즘에는 웹에서 제공하는 정보가 정말 많기 때문에 새로운 화면을 보여줄 때마다 서버에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽, 서버에 높은 부하 등)

 

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 한다.

 

 

SPA 의 경우 클라이언트 사이드 렌더링 (CSR : 클라이언트 사이드 렌더링) 방식이다. 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다.

 

다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 한다. 리액트 라우팅 라이브러리는 리액트 라우터, 리치 라우터, Next.js 등이 있다. 리액트 라우터는 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 하며 더 나아가 서버 사이드 렌더링을 할 때 라우팅을 도와주는 컴포넌트를 제공한다.

 

SPA 의 단점은 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것이다. 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트를 불러오기 때문이다.

 

 

 

 

 

 

Link 컴포넌트를 사용하여 다른 주소로 이동하기

 

Link 컴포넌트는 클릭하면 다른 주소로 이동하는 컴포넌트이다. 일반 웹 애플리케이션에서는 a 태그를 사용하여 페이지를 전환하는데, 리액트 라우터를 사용할 때는 이 태그를 직접 사용하면 안 된다. a 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날리게 된다. 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링하게 되는 것이다. 

 

Link 컴포넌트를 사용하여 페이지를 전환하면 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API 를 사용하여 페이지의 주소만 변경한다. Link 컴포넌트 자체는 a 태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있다.