내가 보려고 만든 개발 공부 일지

history.pushState ( 화면 전환 ) 본문

Javascript

history.pushState ( 화면 전환 )

kwangsunny 2021. 9. 21. 23:25

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 : 변경할 브라우저 제목 (변경 원치 않으면 null)

Url : 변경할 주소

 

사용예)

window.onpopstate = function(e) { 
    console.log(`${JSON.stringify(e.state)} | ${location.origin} | ${location.pathname}`);
}

var state = {page_id : 1, data : 'test'};
var url = location.origin + '/myPage';
history.pushState(state, null, url);

코드를 실행하면 history.pushState 수행했을때 브라우저 주소에 /myPage 붙는걸 있고,

뒤로가기를(원래 url) 한뒤 다시 앞으로(pushState 추가된 url) 가기를 클릭 하면

콘솔 출력값으로 {"page_id":1,"data":"test"} | http://localhost:5000 | /myPage  출력된다.

Comments