React 에서 페이지 전환할때 사용하는 react-router 는 history.push 를 통해 마치 SSR 처럼 브라우저 주소를 바꿔주고
동시에 Root 엘리먼트의 내용물도 바꿔준다. 이걸 순수 JS 로 구현하고자 한다면 history.pushState 를 사용하면 된다.
History.pushState 는 페이지 이동 없이 주소만 바꿔준다. (브라우저의 뒤로가가 버튼이 활성화 된다.)
브라우저 페이지를 이동하게 되면 window.onpopstate 라는 이벤트가 발생하게 되는데, pushState 를 했을때는 popstate 이벤트가 발생하지않고, 뒤 / 앞으로 가기를 클릭 했을때 popstate 이벤트가 발생하게 된다.
즉, pushState 와 popstate 둘을 이용하여 SPA 의 페이지 전환을 구현할 수 있다.
구문
history.pushState(state, title[, url]);
state
브라우저 이동 시 넘겨줄 데이터(popstate 에서 받아서 원하는 처리 가능)
title
변경할 브라우저 타이틀
url
변경할 브라우저 주소
아래와 같이 함수를 호출하는 버튼이 있습니다.
<button type="button" onclick="testPPP">push 테스트</button>
testPPP Function
let testPPP = function() {
console.log('aaaaaaaaaa');
history.pushstate({data: 'aaa', page: 'aaaaaa'}), '타이틀이다 우하하하하', 'test/page');
}
window.onpopstate Function
* 뒤로가기, 앞으로가기 이벤트를 감지하는 onpopstate 이벤트
window.onpopstate = function(e) {
console.log(`${JSON.stringify(e.state)} | ${location.origin} | ${location.pathname}`);
}
push 테스트 버튼을 클릭 했을 때 testPPP 함수에서 history.pushState 가 실행된다.
실행된 후 URL 주소를 보면 history.pushState 에 의해 /test/page 로 바뀐다. (localhost:8082/test/page)
같은 페이지이지만 URL 주소만 바뀐걸 확인할 수 있다.
뒤로가기 버튼을 클릭해보자
앞으로 가기 버튼도 활성화되며 같은 페이지에서 pushState 하기 전 URL 주소로 돌아간걸 확인할 수 있다.
(localhost:8082/이전주소url)
사용하는 이유
사용자가 A 페이지에서 B 화면으로 이동하기 위해선 a 태그 등 여러가지의 방법을 통해
페이지를 이동합니다. URL에 데이터를 저장하기 위해서는 가장 간단한 방법인
document.location.hash 를 사용한 해시태그 사용입니다.
해시태그(#) 뒤에 데이터 값을 사용하여 URL에 저장할 수 있습니다.
하지만 # 뒤에 값을 변경하면 히스토리도 같이 변경됩니다.
이런 이유로 HTML5에 추가된 history.pushState, history.replaceState 를 이용해
보다 편리하게 history를 관리할 수 있습니다.
