History API의 replaceState() 메서드 활용하기
웹 개발을 하다 보면 URL 끝에 붙어 있는 해시(#section 같은 앵커)를 제거해야 하는 경우가 종종 있습니다. 이때 window.location.hash = '';처럼 단순히 값을 비우는 방식도 있지만, 더 깔끔하고 권장되는 방법은 History API의 replaceState() 메서드를 사용하는 것입니다.
replaceState()란 무엇인가?
replaceState() 메서드는 현재 히스토리 엔트리(history entry)를 수정하는 기능을 합니다. 메서드에 전달된 state 객체, title, URL로 현재 항목을 대체하며, 페이지를 새로고침하지 않고도 주소창의 URL을 변경할 수 있습니다.
이 메서드는 사용자의 특정 동작에 반응하여 현재 히스토리 엔트리의 상태(state)나 URL을 갱신해야 할 때 특히 유용합니다. 예를 들어 탭 전환, 모달 열기, 필터 적용 등의 상황에서 URL을 조용히 업데이트할 수 있습니다.
URL에서 해시 제거하기
현재 URL에서 해시를 제거하려면 아래와 같이 한 줄의 코드만 작성하면 됩니다.
history.replaceState(null, '', window.location.pathname + window.location.search);또는 더 간단하게 빈 문자열을 전달하는 방식도 사용됩니다.
history.replaceState(null, null, ' ');위 코드는 현재 경로(pathname)와 쿼리 스트링(search)은 그대로 유지한 채 해시 부분만 제거합니다. 브라우저의 뒤로 가기 버튼 동작에 영향을 주지 않으면서 URL이 즉시 변경된다는 점이 큰 장점입니다.
pushState()와의 차이점
비슷한 역할을 하는 pushState() 메서드도 있지만, 이 메서드는 새로운 히스토리 엔트리를 추가합니다. 따라서 단순히 해시만 제거하는 목적이라면 히스토리 스택을 오염시키지 않는 replaceState()가 더 적합합니다.
정리
history.replaceState()는 페이지 새로고침 없이 현재 URL을 변경할 수 있습니다.- 해시 제거 시에는
pathname과search를 함께 전달하는 것이 안전합니다. - 모든 최신 브라우저(Chrome, Firefox, Safari, Edge 등)에서 지원되므로 호환성 걱정 없이 사용할 수 있습니다.