[JavaScript] history pushState 와 replaceState 이해하기

웹 개발에서 history.pushState와 history.replaceState는 HTML5 History API의 일부로, 페이지의 URL을 동적으로 변경하면서도 페이지를 새로고침하지 않고 상태를 관리할 수 있게 해줍니다. 이 API는 SPA(Single Page Application)에서 중요한 역할을 하며, 사용자 경험을 개선하는 데 사용됩니다.

---

1. history.pushState와 history.replaceState의 차이점

1.1 공통점

• 둘 다 **브라우저의 히스토리 스택(history stack)**을 조작할 수 있습니다.
• URL을 변경하지만 페이지를 다시 로드하지 않습니다.
• 추가적인 상태 데이터를 저장할 수 있습니다.
• popstate 이벤트와 함께 사용할 수 있습니다.

1.2 차이점

기능	pushState	replaceState
히스토리 스택	새로운 상태를 추가함	현재 상태를 대체함
뒤로가기 버튼	추가된 상태로 이동 가능	대체된 상태로 이동 불가

 

---

2. 각 메서드의 문법

history.pushState(state, title, url)

history.pushState(state, title, url);

 

• state: 상태 객체(데이터). 브라우저 히스토리에 저장되며, popstate 이벤트에서 사용할 수 있습니다.
• title: 현재 브라우저에서 무시되며 빈 문자열로 남겨둬도 됩니다.
• url: 새로 설정할 URL입니다. 같은 도메인 내에서만 변경 가능.

history.replaceState(state, title, url)

history.replaceState(state, title, url);

 

• pushState와 동일한 매개변수를 사용하지만, 현재 히스토리 항목을 대체합니다.

---

3. 사용 예제

3.1 pushState 사용 예제

새로운 상태를 추가하면서 URL을 변경합니다.

// 초기 상태
console.log(location.href); // https://example.com/

// 새로운 상태 추가
history.pushState({ page: 1 }, "Page 1", "/page1");

console.log(location.href); // https://example.com/page1

// popstate 이벤트 핸들링
window.addEventListener("popstate", (event) => {
  console.log("Popstate triggered!", event.state);
});

// 뒤로가기 버튼을 누르면 popstate 이벤트 발생

 

---

3.2 replaceState 사용 예제

현재 상태를 대체합니다.

// 초기 상태
console.log(location.href); // https://example.com/

// 상태를 대체
history.replaceState({ page: 2 }, "Page 2", "/page2");

console.log(location.href); // https://example.com/page2

// popstate 이벤트 핸들링
window.addEventListener("popstate", (event) => {
  console.log("Popstate triggered!", event.state);
});

// 뒤로가기 버튼을 눌러도 대체된 상태로 인해 이전 URL로 이동하지 않음

 

---

4. 실전 응용: SPA 라우팅

pushState와 replaceState는 SPA에서 라우팅을 구현하는 데 자주 사용됩니다.

// SPA 라우터 구현
function navigate(path) {
  // 상태 추가
  history.pushState({ path }, "", path);

  // 새 콘텐츠 로드
  renderContent(path);
}

function renderContent(path) {
  const contentDiv = document.getElementById("content");
  contentDiv.textContent = `You are on ${path}`;
}

// popstate 이벤트 처리
window.addEventListener("popstate", (event) => {
  const path = event.state?.path || "/";
  renderContent(path);
});

// 초기 렌더링
renderContent(location.pathname);

// 버튼 클릭 이벤트
document.getElementById("btn1").addEventListener("click", () => navigate("/page1"));
document.getElementById("btn2").addEventListener("click", () => navigate("/page2"));

 

HTML 구조:

<div id="content"></div>
<button id="btn1">Go to Page 1</button>
<button id="btn2">Go to Page 2</button>