싱글페이지 어플리케이션 (SPA)

리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션 (single page application)  방식으로 개발하는 것이 정석이다.

단일 페이지 어플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션이다.

 

기존의 전통적인 방식의 웹 페이지는 페이지를 전환 할 때마다 렌더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있었다. 단일 페이지 애플리케이션은 페이지 전환에 의한 렌더링을 클라이언트에서 처리하기 때문에 자연스럽게 작동한다. 

 

SPA 구현이 가능하려면 다음 두가지 기능이 필요하다

 

1. 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있다. 단 브라우저는 서버로 요청을 보내지 않아야 한다.

 

2. 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리할 수 있다. 단 브라우저는 서버로 보내지 않아야 한다. 

 

이러한 조건을 만족하는 브라우저 API는 pushState, replaceState 함수와 popState 이벤트이다. 

 

브라우저에는 히스토리에 state 를 저장하는 스택이 존재한다. 브라우저 히스토리 API 를 간단하게 확인해보는 코드를 만들어보자.

 

import React, {useEffect} from 'react';


export default function App(){
  useEffect(() => {
    window.onpopstate = function(event){
      console.log(`location: ${document.location}, state : ${event.state}`); // 함수가 실행되면 콘솔에서 확인
    };
  },[]);
  return (
    <div>
      <button onClick={()=> window.history.pushState('v1', '', '/page1')}>
        page1
      </button>
      <button onClick={()=> window.history.pushState('v2', '', '/page2')}>
        page2
      </button>
    </div>
  );
};

 

 

프로젝트를 실행시킨뒤에 구글창을 킨 뒤에 localhost:3000 으로 이동해주면 위의 창이 뜬다. 

 

한번 두 버튼을 눌러보면 브라우저 주소창의 url이 번갈아서 page1, page2 로 바뀌는 것을 확인 할 수 있다.  이 떄는 서버로 요청이 가지도 않고 화면도 변하지 않고 스택에 state 만 쌓이게 된다. onpopstate 함수도 실행이 되지 않는다. 

 

뒤로가기 버튼을 눌러 보면 onpopstate 함수가 실행되는 것을 볼 수 있다.

 

 

계속해서 뒤로 가기 버튼을 누르면 스택이 비워질 때까지 최초에 접속했던 구글 페이지로 간다. 

 

 

위의 두가지 기능이 pushState 함수와 popstate 이벤트로 모두 구현됬다. 

 

replaceState 함수는 pushState와 거의 같지만 스택에 state를 쌓지 않고 가장 최신의 state를 대체한다. 

 

이런식으로 클라이언트에서 라우팅 처리가 되는 단일 페이지 애플리케이션(SPA)를 만들 수 있다.