history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근할 수 있다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 제공한다.
세션 히스토리란?
브라우저에서 페이지를 이동하면 위 사진처럼 페이지 이동 이력이 나타나는 데 이것을 history 스택이라고 한다. History API 를 이용하면 이 history 스택을 조작할 수 있다.
History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.
사용법
사용자 방문 기록을 앞 뒤로 이동하기
back() , forward() , go() 사용
histroy.back(); // 뒤로 이동
histroy.forward(); // 앞으로 이동
// 특정 지점으로 이동
histroy.go(-1); // 뒤로 가기
history.go(1); // 한 페이지 앞으로 이동
history.go(2); // 두 페이지 앞으로 이동
// 새로고침
history.go();
history.go(0);
console.log(histroy.length); // 방문 기록 스택 페이지 수이 세 메서드를 호출하면 브라우저는 해당 페이지를 reload 하기 때문에 SPA 에서 잘 사용되지 않는다.
주소창 URL 조작
History API는 브라우저의 현재 URL 조작할 수 있도록 pushState()와 replaceState() 메서드를 제공한다. 위에서 다룬 실제로 페이지가 이동하는 메서드와 다르게 이 2개의 메서드는 브라우저 주소 표시줄의 URL만 갱신되고 실제로 해당 페이지가 다시 불러오지는 않는다.
pushState(state, unused, url)
replaceState(state, unused, url)두 메서드 모두 3개의 매개변수를 받는다.
첫 번째 인자는 이 URL에 연관된 상태 객체를 의미한다. pushState()와 replaceState() 가 호출되면 필수적으로 histrory 스택이 변경이 된다. 이 때, 스택에 들어가는 아이템의 정보로 이 상태 객체가 들어간다. url 정보 뿐만 아니라 다른 정보를 넣고 싶을 때 이 매개변수를 이용하면 된다.
두 번째 인자는 하위 호환성 때문에 존재하는 것으로 그냥 빈 문자열 "" 을 넘긴다.
세 번째 인자는 새로 변경할 URL 을 넘긴다. (상대 경로, 절대 경로 둘 다 가능). 새 URL은 현재 URL과 같은 출처여야 한다.
pushState() 메서드와 replaceState() 메서드 모두 현재 세션 히스토리를 변경하여 url을 변경시킨다. 하지만 세션 히스토리를 변경시키는 방식에 차이가 있다.
pushState()
인자로 넘어온 URL을 현재 페이지의 바로 다음 방문 기록으로 추가하고, 그 이후의 방문 이력을 있다면 모두 지운다.
// a -> b -> c -> d -> e
// ⬆ 현재 페이지
history.pushState({}, "", "x");
// a -> b -> x
// ⬆ 현재 페이지
history.pushState({}, "", "y");
// a -> b -> x -> y
// ⬆ 현재 페이지
history.back();
// a -> b -> x -> y
// ⬆ 현재 페이지따라서 pushState() 메서드를 호출한 이후 브라우저에서 ‘뒤로가기’ 버튼을 클릭해 원래 페이지로 돌아가는 것이 가능하지만 ‘앞으로 가기’ 버튼은 비활성화 된다.
replaceState()
인자로 넘어온 URL이 현재 페이지를 대체한다.
현재 페이지 다음에 있는 방문이력은 그대로 둔다.
// a -> b -> c -> d -> e
// ⬆ 현재 페이지
history.replaceState({}, "", "x");
// a -> x -> c -> d -> e
// ⬆ 현재 페이지
history.back();
// a -> x -> c -> d -> e
// ⬆ 현재 페이지따라서 replaceState() 메서드를 호출한 이후 ‘뒤로 가기’ 버튼을 누르면 원래 페이지의 이전 페이지로 이동하고 ‘앞으로 가기’ 버튼을 누르면 다음 페이지로 이동할 수 있다.
PopStateEvent
PopStateEvent 는 브라우저에서 뒤로 가기나 앞으로 가기를 할 때 window 전역 객체에서 발생한다. 그러므로 이벤트 핸들러로 해당 URL에 부합하는 내용을 클라이언트에 보여줄 수 있다.
이 때 사용하는 것이 pushState() 메서드와 replaceState() 메서드의 첫 번째 매개변수인 상태 객체이다. 상태 객체를 읽어서 적절한 처리를 할 수 있다.
window.addEventListener("popstate", (event) => {
const { state } = event;
});이 PopStateEvent 는 SPA 구성할 때 페이지 이동 처리를 하기 위해 필수적으로 사용하는 이벤트이다. 실제 웹사이트 자체가 바뀌지 않는데 클라이언트 화면을 변경해주려면 해당 히스토리 이벤트를 프로그래머가 알아야 하는 데 PopStateEvent 가 이를 해결한다.
