230213 항해99 99일차 History API
- SPA의 단점은 주소가 바뀌지 않는다는 것이다. 초창기에는 주소 뒤에 #(해쉬) #!(해쉬뱅)을 붙이고 뒤에 하위 주소를 넣었다. 하지만 서버는 # 뒷 부분을 제대로 된 주소라고 생각하지 않는다.
- 따라서 해쉬뱅 대신 브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸게 되었다. 바로
History API이다. - 이 API는 기존 history 객체(
window.history)를 그대로 활용한다. 따라서 자바스크립트로 뒤로가기(history.back())와 앞으로 가기(history.forward()), 지정한 위치로 가기(history.go(인덱스))를 모두 사용할 수 있다. - 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드가 HTML5에서 생겼다.
- 바로
history.pushState()와history.replaceState()이다.
pushState
history.pushState({data: 'pushpush'}, 'title을 pushState로', '/pushpush')- 첫번째 인자는 바뀐 주소와 함께 저장할 데이터 객체이고, 두번째 인자는 바꿀 제목, 세번째 인자는 바꿀 주소이다.
- 주소와 함께 데이터도 저장할 수 있기 때문에 매우 유용하다. 이 데이터에 바뀔 페이지의 정보들을 담아두고 클라이언트에서 정보를 활용해 새로운 페이지를 렌더링하면 된다. 정보는
history.state로 접근할 수 있다. - 세번째 인자는 바뀔 주소이다. 위의 예시에서는
/pushpush를 주었기 때문에 절대 경로로 처리가 되었다. 만약 그냥pushpush나./pushpush로 줬다면 상대경로로 처리가 된다. - 뒤로가기를 누르면 원래 주소로 돌아간다. 앞으로가기를 눌러서
/pushpush로 되돌아 갈 수도 있다.
replaceState
history.replaceState({ data: 'replace' }, 'title을 replaceState로', '/replace');replaceState는 뒤로가기를 활성화하지 않고 주소만 바꾼다.pushState는 주소 목록에 새로운 주소를 추가한다.
popstate
window.addEventListener('popstate', function () {
console.log('popstate', history.state);
document.querySelector('#state').innerHTML = JSON.stringify(history.state);
});pushState와replaceState로 주소를 바꾼 후, 뒤로가기나 앞으로가기를 했을 때 발생하는 이벤트가 있다. 바로popstate이벤트이다. 예제처럼 윈도우에 이벤트 리스너를 연결해 두면 뒤로가기나 앞으로가기를 눌렀을 때 이벤트가 발생한다.pushState를 여러 번 눌렀다가 뒤로가기를 해보면#state에history.state정보가 뜬다.- 주의할 점은
pushState와replaceState를 할 때는 이벤트가 발생하지 않는다는 것이다.pushState또는replaceState를 한 후, 뒤로가기나 앞으로가기를 눌렀을 때만 발생한다.popstate이벤트 발생 후history.state에 접근하면 이전state를 가져올 수 있다. 따라서 이전 페이지도 그 정보들을 활용해 다시 렌더링할 수 있다.
참조: History API
