history.pushState 화면전환 / 현재 페이지 주소창 url변경하기

History.pushstate

페이지 이동없이 주소만 바꿔준다. (브라우저의 뒤로가기 버튼이 활성화 된다.)

브라우저 페이지를 이동하게되면 window.onpopstate라는 이벤트가 발생하는데, pushState를 했을 때는 popstate이벤트가 발생하지 않고, 뒤/앞으로 가기를 클릭했을 때 popstate이벤트가 발생하게 된다.

=> pushState와 popstate를 이용해 SPA의 페이지 전환을 구현할 수 있다.

 

pushstate()는 현재의 주소를 다른 것으로 변경하면서 페이지는 그대로 유지해주기 때문에 페이지가 전환, 갱신되는 것을 방지하면서 동시에 주소창의 url이 변경된다.

history.pushstate(state,title,url);

state : 브라우저 이동시 넘겨줄 데이터 (popstate에서 받아서 원하는 처리를 해줄 수 있음)
title : 변경할 브라우저 제목 (변경을 원치 않으면 null)
url : 변경할 주소

 

History.pushstate 언제 필요할까

- 검색페이지나 페이지네이션(pagination)을 가진 페이지에서 많이 사용된다.

검색조건이나 페이지 전환이 비동기식 ajax로 이루어질때 이를 반영하기 위해 페이지 주소를 함께 변경한다.

페이지 주소를 변경해주면 만약 페이지를 리로드, 갱신하더라도 바뀐 주소나 쿼리 스트링 정보를 그대로 가져올 수 있기 때문이다.

 

---

[참조]

https://kwangsunny.tistory.com/28

history.pushState ( 화면 전환 )

 

https://developer.mozilla.org/ko/docs/Web/API/History/pushState

History.pushState() - Web API | MDN

https://webisfree.com/2020-09-10/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-history-%EA%B0%9D%EC%B2%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%B1%EC%8B%A0-%EC%97%86%EC%9D%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%84%ED%99%98-pushstate

자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate