history api 알아보기
history API는 html5에 도입되었다.
SPA의 라우팅 로직에 주로 쓰인다.
histroy API 는 history객체(window.history)를 활용하여 주소를 바꾼다.
여러 메소드들이 있지만 SPA에서 쓰이는 메소드는 다음과 같다.
history.pushState(state,title,url)
history.pushState() 메서드는 브라우저의 세션 기록 스택에 상태를 추가하는 함수이다.
state
state는 바뀐 주소와 저장할 데이터 객체이다.
history의 상태가 바뀔 때마다 popstate 이벤트가 발생하는데, 이때 이벤트 객체의 state 속성에 해당 상태의 복제본이 담기게 된다.
주소와 함께 데이터를 history.state에 저장할 수 있기 때문에 유용하다.
바뀔 페이지의 정보들을 담아두고 history.state에 접근하여 새로운 페이지를 렌더링하면 된다.
title
제목이지만 대부분의 브라우저에서 title을 지원하지 않는다. 빈 문자열을 제공하면 된다.
url
바뀔 주소이다.
절대경로를 제공하려면 /url 상대경로를 제공하려면 ‘url’의 형태로 제공하면 된다.
history.replaceState(state,title,obj)
history.replaceState()는 현재 history를 수정해 stateObj,title,URL로 대체한다. history.pushState()는 추가를 하지만 history.replaceState는 업데이트한다.
popstate
popstate이벤트는 pushState나 replaceState후에 뒤로가기나 앞으로가기를 할 경우에 발생한다.