history.replaceState 사용하여 로드 없이 주소 표시줄 업데이트 | ChatGPT

history.replaceState

history.replaceState는 JavaScript에서 브라우저의 세션 히스토리를 수정하고 현재 페이지의 URL을 변경할 수 있는 메서드입니다. 이를 통해 페이지를 새로 로드하지 않고도 브라우저의 주소 표시줄을 업데이트할 수 있습니다.

history.replaceState 개념

history.replaceState는 HTML5의 History API의 일부로, 브라우저의 기록(히스토리)을 관리하는 데 사용됩니다.

이 메서드를 사용하면 현재 페이지의 URL을 변경하고 히스토리에 새로운 상태를 추가할 수 있습니다.

주로 Ajax 및 SPA (Single Page Application) 애플리케이션에서 사용되어 페이지를 다시 로드하지 않고도 브라우저 주소를 업데이트하거나 상태 정보를 저장할 수 있습니다.

history.replaceState 원리

istory.replaceState 메서드는 다음과 같은 구문을 갖습니다.

history.replaceState(stateObject, title, newURL);

• stateObject: 새로운 상태를 나타내는 JavaScript 객체로, 필수는 아닙니다. 상태 정보를 저장할 때 사용됩니다.
• title: 페이지 제목으로, 대부분의 브라우저에서 무시되며 빈 문자열을 사용하는 것이 일반적입니다.
• newURL: 새로운 URL 문자열로, 현재 페이지의 URL을 대체합니다.

예를 들어, 다음은 history.replaceState를 사용하여 URL을 변경하는 예제입니다.

var newState = { page: "search", category: "books" };
var newURL = "/search/books";

history.replaceState(newState, "", newURL);

history.replaceState를 사용하면 브라우저 히스토리를 수정하고, 사용자에게 새로운 URL을 표시하면서 페이지를 다시 로드하지 않는 원리로 페이지 전환이 이루어집니다.

출처 | ChatGPT