💛 리액트 SPA 01 (브라우저 히스토리 API)

SPA (Single Page Application)란 ?

싱글 페이지 애플리케이션의 약어이다. 뜻 그대로 한 개의 페이지로 이루어진 애플리케이션 !

애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해줄 수 있다. 그리고 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 한다. 리액트 라이브러리는 리액트 라우터, 리치 라우터, Next.js 가 있다.

단점

앱의 규모가 커지면서 자바스크립트의 파일이 너무 커진다는 것. 하지만 이 단점을 보완해줄 코드 스플리팅이 있어서 이 것을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다. 자바스크립트가 실행될 때까지 페이지가 비어 있기 때문에 자바스크립트 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다. 이런점도 서버 사이드 렌더링을 통해 모두 해결할 수 있습니다.

브라우저 히스토리 API

단일 페이지 애플리케이션 구현이 가능하려면 다음 두 가지 기능이 필요하다.

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

이러한 조건을 만족하는 브라우저 api는 pushState, replaceState 함수와 popstate 이벤트이다. api이름에서 알 수 있듯이 브라우저에는 히스토리에 state를 저장하는 스택이 존재한다.

import React, { useEffect } from "react";

export default function HistoryShow() {
  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("v1", "", "/page2")}>
        page2
      </button>
    </div>
  );
}

첫 번째 위 코드는 /page1과 /page2로 번갈아 변경되는 것을 확인할 수 있다. 이때 서버로 요청이 가지 않고 화면도 변하지 않는다. 단지 스택에 state가 쌓일 뿐이다. onpopstate 함수도 호출되지 않는다. useEffect 함수는 이벤트 핸들러를 등록하거나, api를 호출하는 등의 부수 효과를 처리할 때 사용하는 훅이다.

import React, { useEffect, useState } from "react";

export default function HistoryShow02() {
  const [pageName, setPageName] = useState("");
  useEffect(() => {
    window.onpopstate = (event) => {
      setPageName(event.state);
    };
  }, []);

  //버튼 1
  function onClick1() {
    const pageName = "page1";
    window.history.pushState(pageName, "", "/page1");
    setPageName(pageName);
  }
  
  //버튼 2
  function onClick2() {
    const pageName = "page2";
    window.history.pushState(pageName, "", "/page2");
    setPageName(pageName);
  }
  return (
    <>
      <button onClick={onClick1}>page1</button>
      <button onClick={onClick2}>page2</button>

      {!pageName && <Home />}
      {pageName === "page1" && <Page1 />}
      {pageName === "page2" && <Page2 />}
    </>
  );
}

function Home() {
  return <h2>여기는 홈페이지입니다.</h2>;
}
function Page1() {
  return <h2>여기는 페이지 1입니다.</h2>;
}
function Page2() {
  return <h2>여기는 페이지 2입니다.</h2>;
}

두 번째 이 코드는 현재 페이지 정보를 pageName 상탯값으로 관리한다. popstate 이벤트가 발생하면 페이지를 전환한다는 의미로 pageName 상탯값을 수정한다. 브라우저 히스토리 state를 페이지 이름으로 사용하고 있다. 페이지 버튼 클릭시 호출되는 이벤트 처리 함수다. 페이지 버튼을 누르기 전에는 Home 컴포넌트가 렌더링된다. 첫 번째 페이지 버튼을 클릭하면 Page1 컴포넌트가 렌더링되고, 두 번째 페이지 버튼을 클릭하면 Page2 컴포넌트가 렌더링된다. 페이지 버튼을 클릭하면 브라우저 주소창의 내용이 변경되고, 브라우저의 뒤로 가기 버튼을 클릭해도 의도한 대로 잘 동작하는 것을 확인할 수 있다.