pushState

SPA 방식으로 만들어진 사이트들은 새로고침이 일어나지 않고 내용을 바꿀 수 있습니다.

하지만 url은 바뀌지 않아서 이를 해결할 수 있는 방법이 History API의 pushState() 입니다.

 

history.pushState(state, title, url);

 

state에는 저장할 데이터 객체, title에는 브라우저 제목, url은 바뀔 주소입니다.

state와 title은 넣을 값이 없으면 null을 넣어도 됩니다.

 

pushState로 주소를 바꾼 후 뒤로가기를 하면 popState라는 이벤트가 발생합니다.

 

window.addEventListener('popstate', function () {
	console.log('popstate::', history.state)
});

 

pushState의 state에 입력한 데이터를 history.state로 접근하여 불러올 수 있습니다.

리액트, 뷰, 앵귤러는 이미 라우터를 이용해서 활용되고 있는 방법입니다.