History API ( with SPA )

김수근·2022년 8월 28일

History API

DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다.

기본 사용법

뒤로 가기

history.back();

앞으로 가기

history.forward();

특정 지점으로 이동

history.go(-1); // == back();
history.go(1); // == forward();

현재 페이지 새로고침

history.go(0)
history.go()

방문기록 스택 확인

window.history.length

history API가 왜 SPA랑 관련이 있을까?

SPA(Single page application)는 특정 이벤트가 발생했을 때 전체 페이지가 아닌 상호 작용하기 위한 최소한의 요소만 변경이 일어나야 합니다. 서버에 요청해 전체 페이지를 바꾸는게 아니라 일부 컨텐츠만 변경하고 주소를 변경 시켜줘야 하는데 이 때 화면이 깜박거리지 않고 주소를 바꿔주는 역할을 할 수 있는게 history API 입니다.

history API 에서 위에서의 기본 사용법 이외에 history의 목록을 다루는 pushState(), replaceState()를 사용하여 구현하는데 아래는 사용방법에 대한 예시입니다.

예시코드

아래 demo프로젝트를 기준으로 캡쳐하여 설명하였습니다.
https://github.com/picpal/velog/tree/history-api-demo

초기화면

pushState 버튼 클릭 후

pushState 클릭 후 주소가 변경되고 뒤로가기 버튼이 활성화 된 것을 확인 할 수 있습니다.
history 목록에 새로운 경로를 push한 상태이기 때문에 뒤로가기 후 앞으로 가기도 가능합니다.
페이지 주소에 대한 데이터는 history.state에 들어있기 때문에 언제든지 사용할 수 있습니다.

pushState 버튼 클릭 후

replaceState 클릭 후 주소가 변경되고 뒤로가기 버튼이 비 활성화된 것을 확인 할 수 있습니다.

popstate 이벤트

pushState와 replaceState로 주소를 바꾼 후, 뒤로가기나 앞으로가기를 했을 때 발생하는 이벤트
윈도우에 이벤트 리스너를 연결해 두면 뒤로가기나 앞으로가기를 눌렀을 때 이벤트가 발생합니다
popstate 이벤트 발생 후 history.state에 접근하면 이전 state를 가져올 수 있습니다
```
  window.addEventListener('popstate', function () {
    console.log('popstate', history.state);
    document.querySelector('#state').innerHTML = JSON.stringify(history.state);
  });
```
❗️주의할 점은 pushState와 replaceState를 할 때는 이벤트가 발생하지 않습니다. pushState 또는 replaceState를 한 후, 뒤로가기나 앞으로가기를 눌렀을 때만 발생