📖 목차

1. history API
2. pushState
3. replaceState

1. history API

🕵️‍♀️history API란?
브라우저의 세션 기록에 접근할 수 있는 메소드를 담고 있는 객체이다.
밑에 작성할 pushState와 replaceState는 history 목록을 추가하거나 변경하기 위해 제공되는 메소드이다.

// 브라우저 뒤로 가기
window.histroy.back();

// 브라우저 앞으로 가기
window.histroy.forward();

// 지정한 위치로 가기
window.history.go(-1);            // 한 페이지 뒤로 가기
window.history.go(2);             // 두 페이지 앞으로 가기
window.history.go(-3);            // 세 페이지 뒤로 가기

2. pushState

🕵️‍♀️ pushState란?
세션 기록 스택에 상태를 추가하는 메서드로 페이지 갱신(페이지 로드) 없이 url 주소만 바꿔 페이지를 보여준다. 또한, 브라우저의 뒤로 가기 버튼이 활성화 된다.

브라우저 페이지를 이동하게되면 window.onpopstate라는 이벤트가 발생하는데, pushState를 했을 때는 popstate이벤트가 발생하지 않고, 앞/뒤로 가기를 클릭했을 때 popstate 이벤트가 발생하게 된다.
즉, pushState와 popstate를 이용해 SPA의 페이지 전환을 구현할 수 있다.

// history.pushState(state, title, url);
history.pushState({data: 'pushState1'}, '', '/pushState1');

state 는 세션 히스토리에 넣을 데이터(브라우저 이동 시 넘겨줄 데이터)이며 object 형식이다.
title은 변경할 브라우저 제목이며 잘 사용하지 않아 null로 입력한다.
url은 변경할 브라우저 url 주소이다.

3. replaceState

세션 기록 스택에 현재 상태를 변경하는 메서드이며 pushState와 거의 동일하게 작동한다. 따라서, 현재 상태 개체 또는 URL을 업데이트하려는 경우에 특히 유용하고 현재 상태를 변경하기 때문에 뒤로 가기를 할 수 없다.

// history.replaceState(state, title, url);
history.replaceState({data: 'replaceState'}, '', '/replace-state');

pushState와 매개변수는 같다.