[JS] history.replaceState() 란?

history.replaceState()란?

- 웹 브라우저의 세션 기록(history)을 관리하는 JavaScript의 History API 메서드 중 하나.

- 브라우저의 세션 기록을 수정하거나 대체하는 역할

- 웹 페이지의 URL과 관련된 정보 업데이트

- 뒤로가기와 같은 브라우저 내장 기능을 통해 페이지 이동할 때의 동작 제어

 

history.replaceState()의 인자

- state (상태 객체) : 새로운 URL과 관련된 상태. 페이지의 히스토리 엔트리와 연결. 추가 정보나 데이터를 저장하는데 사용.

- title (제목) : 페이지의 제목을 나타내는 문자열. 일반적으로 이 인자에는 빈 문자열이 전달됨

- url (URL 문자열) : 새 URL을 나타내는 문자열. 브라우저의 주소 표시줄에 표시되는 URL이 이 인자로 전달된 URL로 업데이트됨. 하지만 실제로 페이지가 다시 로드되거나 네트워크 요청은 발생하지 않음

 

사용목적 요약

- 현재 페이지의 URL을 새로운 URL로 변경

- 이에 따라 페이지의 상태 정보도 업데이트

- 실제로 페이지의 리로드나 네트워크 요청은 발생하지 않음

- 사용자 경험을 개선하면서도 페이지 간 전환이나 상태 관리를 자유롭게 제어

 

// 현재 URL: http://example.com/page1
const newState = { data: 'some data' };

// 현재 URL과 상태를 새로운 URL과 상태로 변경
history.replaceState(newState, '', 'http://example.com/page2');