JavaScript history object method

자바스크립트의 window.history 객체는 사용자가 브라우저 탭 내에서 방문했던 페이지들의 기록(세션 히스토리)을 관리하고 제어할 수 있는 기능을 제공합니다.

---

이 객체를 사용하면 브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 프로그래밍 방식으로 동작시킬 수 있을 뿐만 아니라, 현대 웹 개발(특히 React, Vue 등의 SPA)에서 화면 새로고침 없이 URL만 변경하는 정교한 라우팅을 구현할 수 있습니다.

실무 및 싱글 페이지 애플리케이션(SPA) 구축 시 핵심이 되는 history 객체의 중요 메소드들을 2가지 카테고리로 나누어 정리해 드리겠습니다.

---

---

1. 히스토리 이동 관련 기본 메소드

브라우저의 뒤로 가기, 앞으로 가기 툴바 버튼을 코드로 제어하는 메소드들입니다.

• history.back(): 뒤로 가기
  • 사용자가 브라우저의 '뒤로 가기' 버튼을 누른 것과 완전히 동일하게 작동하며, 히스토리의 이전 페이지로 이동합니다.
• history.forward(): 앞으로 가기
  • 사용자가 브라우저의 '앞으로 가기' 버튼을 누른 것과 동일하게 작동하며, 히스토리의 다음 페이지로 이동합니다.
• history.go(delta): 원하는 만큼 앞뒤로 이동 (종합형)
  • 인자로 상대적인 정수(delta)를 받아 이동합니다.
  • history.go(-1)은 back()과 같고, history.go(1)은 forward()와 같습니다. history.go(0)이나 인자를 비우면 현재 페이지를 새로고침합니다.

// 쇼핑몰 등에서 '이전 페이지로 돌아가기' 버튼 구현 시
const goToPreviousPage = () => {
  history.back();
};

// 2단계 전으로 단숨에 이동하기
const jumpBackTwoPages = () => {
  history.go(-2);
};

2. SPA 라우팅의 핵심: History API 메소드 (고급)

HTML5에서 추가된 메소드들로, 화면의 새로고침(서버 요청) 없이 브라우저 주소창의 URL만 바꾸고 방문 기록을 조작할 수 있게 해줍니다.

현대적인 웹 프레임워크들의 라우터 가동 원리이기도 합니다.

1) history.pushState(state, title, url) : 새 히스토리 추가

새로운 주소를 방문 기록에 추가하면서 주소창의 URL을 변경합니다.

• state: 페이지의 상태를 담을 자바스크립트 객체입니다. (나중에 history.state로 꺼내 쓸 수 있습니다.)
• title: 변경할 페이지의 제목입니다. (대부분의 브라우저가 현재는 무시하므로 보통 빈 문자열 ""을 넣습니다.)
• url: 새로 지정할 주소입니다.

// 주소창이 "example.com/main"에서 "example.com/products"로 새로고침 없이 바뀝니다.
const stateObj = { page: "products", filter: "shoes" };
history.pushState(stateObj, "", "/products");

// 뒤로 가기 버튼을 누르면 이전 주소인 "/main"으로 정상 복귀됩니다.

2) history.replaceState(state, title, url) : 현재 히스토리 수정

pushState와 똑같이 주소창의 URL을 변경하지만, 새 기록을 쌓지 않고 현재 방문 기록을 새로운 정보로 완전히 대체합니다.

• 용도: 유저의 검색 필터 조작 상태를 URL에 실시간으로 반영하되, 뒤로 가기를 누를 때 필터 단계마다 뒤로 가는 것이 아니라 단숨에 이전 페이지로 가게 만들고 싶을 때 유용합니다.

// 현재 히스토리 기록을 수정 (새로고침 없음)
history.replaceState({ search: "keyword" }, "", "/search?q=keyword");

💡 History API와 세트로 쓰이는 popstate 이벤트

pushState나 replaceState를 통해 주소를 바꾼 후, 사용자가 브라우저의 '뒤로 가기' 나 '앞으로 가기' 버튼을 누르면 popstate 이벤트가 발생합니다.

이를 통해 개발자는 주소가 바뀔 때 화면의 컴포넌트만 알맞게 갈아끼우는 라우팅 로직을 완성할 수 있습니다.

// 사용자가 뒤로 가기/앞으로 가기를 눌러 기록이 바뀔 때 감지
window.addEventListener('popstate', (event) => {
  console.log("현재 페이지의 상태 데이터:", event.state);
  // event.state 정보를 바탕으로 해당하는 화면을 렌더링하는 코드를 작성합니다.
});

📋 history 객체 중요 메소드 요약표

메소드	기능	주요 특징	새로고침 여부
history.back()	이전 페이지로 이동	브라우저 툴바의 뒤로 가기 연동	있음 (기존 페이지 로드)
history.forward()	다음 페이지로 이동	브라우저 툴바의 앞으로 가기 연동	있음 (기존 페이지 로드)
history.go(n)	n만큼 앞뒤로 이동	음수는 뒤로, 양수는 앞으로 이동	있음
history.pushState()	새로운 주소 기록 추가	서버 요청 없이 주소창 URL만 변경	없음 (SPA 필수)
history.replaceState()	현재 주소 기록 덮어쓰기	뒤로 가기 히스토리를 남기지 않고 주소 변경	없음

학습 정리

• 브라우저 방문 기록의 총 개수는 메소드가 아닌 history.length 프로퍼티를 통해 조회할 수 있습니다.
• pushState와 replaceState는 동일 도메인(Same-Origin) 내의 URL로만 변경할 수 있으며, 다른 사이트의 주소(예: naver.com)를 강제로 집어넣으려고 하면 보안 에러가 발생합니다.
  
  

웹 브라우저의 흐름과 현대 SPA 라우팅의 근간이 되는 history 객체까지 완벽히 마스터하셨습니다!

---