history.replaceState()와 pushState() 그리고 popstate로 브라우저 앞으로가기/뒤로가기 제어하기

하고있는 프로젝트가 점점 복잡해짐에 따라 라우팅 처리, 앞으로가기/뒤로가기 처리도 점점 난이도가 높아져갔다.

특히 앞으로가기뒤로가기 처리를 하는데 있어서 햇갈렸던 개념이

바로 history.replaceState()와 history.pushState() 그리고 popstate 였다.

 

일단 history.replaceState()와 history.pushState() 이 두 가지 부터 살펴보면

이 두 개는 브라우저 히스토리 api에서 제공하는 중요 메소드이다.

페이지나 상태를 히스토리에 남기는 방식인데 그 방식을 푸쉬할 것이냐 리플레이스 할 것이냐의 차이이다.

 

history.pushState(state, title, url)

 

파라미터에는 위 구조의 인자들이 들어가는데 주로 state와 url위주로 들어간다.

history.pushState()를 하게되면 히스토리를 추가하게 되고

history.replaceState()를 하게되면 최근 히스토리를 해당 스테이트로 리플레이스 시키게 된다.

// 초기 상태

// 히스토리: [page1]

history.pushState({}, '', '/page1');

// 새 페이지 추가

// 히스토리: [page1, page2]

history.pushState({}, '', '/page2');

// replaceState 사용

// 히스토리: [page1, page2-updated] <- page2가 page2-updated로 대체됨

history.replaceState({}, '', '/page2-updated');

// 다시 pushState 사용

// 히스토리: [page1, page2-updated, page3]

history.pushState({}, '', '/page3');

 

예를들어 이런식으로 히스토리를 남겼다고 한다면

리플레이스 스테이트 발생 시 페이지2라는 스테이트가 페이지2-업데이티드로 대체가 된다.

 

저렇게 쭉 진행했다고 한다면 페이지 3에서 뒤로가기를 쭉 진행하면

페이지3-페이지2업데이트-페이지1로 가게 된다. 즉 페이지2는 페이지2업데이트로 대체된 것.

 

popstate는 위 둘과는 약간 개념이 다른데

브라우저에서 히스토리 탐색 시(앞으로가기/뒤로가기) 실행되는 이벤트이다.

window.addEventListener('popstate', (event) => {

// 뒤로가기/앞으로가기 할 때마다 실행됨

console.log('현재 state:', event.state);

// event.state는 pushState나 replaceState에서 첫 번째 인자로 넘겨준 데이터

});

 

이렇게 이벤트리스너와 함께 이벤트 실행이 되면 히스토리 변경을 감지하여 적절한 상태를 복원해준다.

 

이 세가지가 잘 작동하여야 SPA 라우팅과 히스토리 관리가 가능해지는 것.