History API
싱글 페이지 애플리케이션(SPA) 라우팅의 핵심
History API는 브라우저의 세션 기록(Session History)을 조작할 수 있게 해주는 기능입니다.
과거에는 다른 페이지로 이동하려면 무조건 서버에 새 HTML을 요청하여 화면 전체가 하얗게 깜빡여야(Refresh) 했지만, History API를 사용하면 페이지 깜빡임 없이 주소창의 URL만 변경하고, 자바스크립트로 필요한 화면 영역만 부드럽게 교체할 수 있습니다. 이것이 React, Vue 등의 프레임워크가 SPA를 구현하는 원리입니다.
과거에는 다른 페이지로 이동하려면 무조건 서버에 새 HTML을 요청하여 화면 전체가 하얗게 깜빡여야(Refresh) 했지만, History API를 사용하면 페이지 깜빡임 없이 주소창의 URL만 변경하고, 자바스크립트로 필요한 화면 영역만 부드럽게 교체할 수 있습니다. 이것이 React, Vue 등의 프레임워크가 SPA를 구현하는 원리입니다.
1. 순간이동 포탈과 발자국 (비유)
🌀
새로운 공간 창조 (pushState)
새로운 포탈을 엽니다. 주소창은 바뀌지만 우주는 다시 만들어지지(새로고침) 않습니다. 포탈을 넘어갈 때마다 뒤로 갈 수 있는 '발자국(히스토리 스택)'이 하나씩 쌓입니다.
⏪
발자국 되돌리기 (popstate)
사용자가 브라우저의 뒤로가기 버튼을 눌렀을 때 발동하는 알람입니다. 자바스크립트는 이 알람을 듣고 남겨진 발자국(이전 상태 객체)을 확인하여 과거 화면을 복원합니다.
2. SPA 동작 흐름 (Diagram)
3. 필수 메서드 및 이벤트
| API 형태 | 역할 및 설명 |
|---|---|
history.pushState(state, title, url) |
새로운 상태 객체와 함께 주소창의 URL을 변경합니다. 히스토리 스택에 새 기록이 추가되므로 브라우저 뒤로가기 버튼이 활성화됩니다. |
history.replaceState(state, title, url) |
새 기록을 추가하지 않고, 현재 히스토리 기록을 덮어씌우며 URL을 변경합니다. (리다이렉트 처리 등에 유용) |
window.onpopstate = () => {} |
브라우저의 뒤로가기/앞으로가기 버튼을 누르거나 history.back()이 호출될 때 발생하는 이벤트입니다. pushState로 넣었던 state 객체를 꺼내 쓸 수 있습니다. |
<!-- NO_PREVIEW -->
<div class="spa-app">
<nav class="navbar">
<div class="logo">🚀 MinSPA</div>
<ul class="nav-links">
<li><a href="/" class="nav-link" data-path="/">홈</a></li>
<li><a href="/profile" class="nav-link" data-path="/profile">프로필</a></li>
<li><a href="/settings" class="nav-link" data-path="/settings">설정</a></li>
</ul>
</nav>
<main id="app-content" class="content-area">
<!-- 콘텐츠가 동적으로 렌더링되는 영역 -->
</main>
<div class="history-log">
<strong>히스토리 스택 상태:</strong> <span id="historyLength">1</span>개
</div>
</div>