history API로 SPA 구현

history API

브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.

세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.

사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.

• history.back(): 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동
• history.forward(): 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동
• history.go(n): 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지 만큼 뒤로, 양수일 경우 n 페이지 만큼 앞으로 이동.

history API는 이러한 브라우저의 세션 기록을 조작할 수 있는 메소드를 담은 객체이며, history API를 활용하여 SPA를 구현할 수 있다.

history.back();
history.foward();
history.go(-1);

 

 

 

pushState, replaceState

pushState() 및 replaceState() 메서드는 각각 히스토리 항목을 추가하고 수정한다. 이 메서드들은 popstate 이벤트와 함께 작동한다.

• pushState는 세션 히스토리에 새 URL 상태를 쌓아 URL만 변경시키고 해당 URL로 요청은 하지 않는다.
  또한 이전 페이지를 기억하여 돌아가게 할 수 있다.
• replaceState는 세션 히스토리에 새 URL 상태를 쌓지 않아 이전 페이지를 기억하지 않고 이동할 URL을 변경시키고 해당 URL로 요청하지 않는다.
  또한 뒤로가기를 하게 되면 이전 페이지로 가지 않고 히스토리에 저장된 제일 마지막 URL로 이동한다.

위 함수들을 호출할 때 3가지 파라미터를 받는다.

 

 

history.pushState(state, title, [, url]);

pushState() 는 state object, title (현재 무시됨), URL (선택사항)의 세 가지 매개변수를 가진다.

• state: history.state에서 꺼내쓸 수 있는 값. 브라우저 이동 시 넘겨 줄 데이터 (popstate에서 받아서 원하는 처리 가능)
• title: 변경할 페이지의 title을 가리키는 값. 대부분 브라우저가 지원하지 않아 빈 문자열을 넣으면 된다.
• url: 세션 히스토리에 새로 넣을 url. (변경할 브라우저의 주소)

const path = window.location.href.replace(window.location.origin, "");	// URL 앞 부분을 날린다. location.origin은 앞 부분을 가지고 있다.

history.pushState({data: 'test', page: 'testpage'}, null, path);
history.replaceState({data: 'test', page: 'testpage'}, null, path);

 

 

 

popstate 이벤트

활성 기록 항목이 변경될 때마다 창에 popstate 이벤트가 전송된다. 활성화 중인 기록 항목이 pushState에 의해 생성되었거나 replaceState 호출의 영향을 받은 경우, popstate 이벤트의 state 속성에는 기록 항목의 상태 객체 복사본이 포함된다.

 

 

 

현재 상태 읽기

다음과 같이 history.state 속성을 사용하여 popstate 이벤트를 기다리지 않고 현재 기록 항목의 상태를 읽을 수 있다.

const currentState = history.state;

 

 

 

 

pushState로 SPA 구현하기

a태그나 location.href로 URL을 변경하면 변경된 주소에서 GET요청이 일어난다.

하지만 pushState로 주소를 변경하는 경우에는 GET 요청을 하지 않는다.

pushState로 주소를 변경한 후 GET요청 등의 이벤트를 일으키려면 hashchange나 popstate 등의 이벤트를 이용해야 한다.

 

const button = document.querySelector("#button");
button.addEventListener("click", function() {
  setHash('abc');
});

window.onpopstate = function() {
  router();
}

// url의 hash가 바뀌면 popstate 이벤트가 호출된다.
function setHash(hash) {
  window.location.hash = `#${hash}`;  // hash change
}

// url의 hash가 바뀌면 hash를 history에 저장한다.
function router(hash) {
  const { pathname, search } = window.location;
  const URL = `${pathname}${search}#${hash}`;
  history.replaceState({data: hash}, null, URL);
}

 

 

 

 

---

 

 

참고:)

https://velog.io/@dhgg321/history-API%EB%A1%9C-SPA-%EA%B5%AC%ED%98%84

history API로 SPA 구현

 

https://developer.mozilla.org/ko/docs/Web/API/History_API/Working_with_the_History_API

History API로 작업하기 - Web API | MDN