popstate 이벤트
브라우저의 뒤로 가기 및 앞으로 가기 탐색에 대응하기
popstate 이벤트은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
popstate의 역할
popstate 이벤트는 사용자가 히스토리를 통해 이동할 때 window에서 발생합니다(뒤로 가기, 앞으로 가기 또는 JavaScript의 뒤로 가기 호출). 이를 통해 SPA가 브라우저에서 시작된 이동에 맞춰 올바른 화면을 다시 표시할 수 있습니다.
발생하는 경우
popstate는 뒤로 가기·앞으로 가기 버튼 클릭, history.back(), history.forward(), history.go(n)에서 발생합니다. pushState/replaceState를 수동으로 호출할 때는 NOT 발생합니다. 이는 프로그래밍 방식의 업데이트이며 페이지가 이미 이를 알고 있기 때문입니다.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});state 속성
이벤트의 state 속성에는 이동 대상 항목에 대해 pushState/replaceState에 전달한 상태 객체가 들어 있습니다. URL에 저장되지 않는 UI 상태(열린 탭, 스크롤 위치)를 복원하는 데 사용하십시오.
새 주소 읽기
주소 표시줄은 popstate가 발생할 때 이미 업데이트되어 있습니다. 새 주소를 찾으려면 location.pathname, location.search, location.hash를 읽으십시오. 상태와 함께 사용하면 목적지 화면을 표시하는 데 필요한 정보가 모두 갖춰집니다.
초기 페이지 로드
popstate는 초기 페이지 로드 시에는 NOT 발생하고 이동할 때만 발생합니다. 시작할 때 현재 주소 정보에서 초기 화면을 표시한 다음, 이후 이동은 popstate가 처리하게 하십시오. 그렇지 않으면 첫 번째 뒤로 가기로 도착한 뒤 초기 페이지가 빈 화면으로 남습니다.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));해시 변경과 popstate
순수 해시 기반 라우팅(URL이 /#/about과 같은 경우)에서는 해시가 바뀔 때 hashchange 이벤트가 발생합니다. popstate는 경로 변경에도 발생합니다. 최신 SPA는 히스토리 API와 popstate를 사용하며, 해시 라우팅은 레거시 방식입니다.
클릭 가로채기
일반적인 <a> 클릭이 클라이언트 측 이동을 시작하게 하려면 클릭을 가로채고, preventDefault를 호출한 다음, pushState와 renderPage를 호출하십시오. 수식 키(명령어 키나 Control 키로 클릭하여 새 탭을 여는 경우)를 확인하고, 해당 키가 있으면 기본 동작으로 넘기십시오.
document.addEventListener("click", (e) => {
const a = e.target.closest("a");
if (!a || a.target || e.metaKey || e.ctrlKey) return;
e.preventDefault();
history.pushState(null, "", a.href);
renderPage(location.pathname);
});스크롤 위치 복원
브라우저는 뒤로 이동할 때 스크롤 위치를 자동으로 복원하려고 하지만, 콘텐츠가 비동기적으로 표시되므로 SPA에서는 안정적이지 않습니다. pushState의 상태에 스크롤 위치를 저장하고 popstate에서 복원하십시오: window.scrollTo(0, e.state?.scroll ?? 0).
비동기 렌더링 시 주의점
renderPage가 데이터를 비동기적으로 가져오면 주소가 콘텐츠보다 먼저 업데이트됩니다. 로딩 상태를 표시한 후 렌더링하십시오. 가져오는 동안 사용자가 뒤로 가기를 눌렀을 때 취소된 가져오기의 결과가 새 화면을 덮어쓰는 경쟁 조건을 피하십시오.
프레임워크 라우터
리액트 라우터, 뷰 라우터, SvelteKit의 라우터는 모두 히스토리와 popstate를 감쌉니다. 프레임워크가 없어도 기본 원리는 같습니다. popstate를 수신하고, 링크를 가로채고, pushState를 호출하면 됩니다. 오버헤드가 중요하다면 순수 JavaScript로 약 50줄의 라우터를 직접 작성할 수 있습니다.
흔한 함정: 메모리 누수
각 화면의 설정 과정에서 이벤트 리스너와 타이머를 연결할 수 있습니다. 화면이 바뀔 때 명시적으로 정리하지 않으면(popstate에서 또는 pushState 래퍼에서 정리하지 않으면) 리스너가 계속 쌓여 시간이 지날수록 성능이 저하됩니다. 화면별 구독을 AbortController로 추적하고 화면이 바뀔 때 중단하십시오.
이해도 확인
history의 pushState를 직접 호출할 때 popstate 이벤트가 NOT 발생하는 이유는 무엇입니까?
요약
popstate는 브라우저의 뒤로 가기·앞으로 가기 이동에서 발생하며, 저장된 상태와 새 위치에 접근할 수 있게 합니다. pushState/replaceState에서는 발생하지 않습니다(코드가 이미 알고 있기 때문입니다). 초기 페이지 로드에서도 발생하지 않으므로 직접 표시해야 합니다. SPA 이동을 위해 링크 클릭을 가로채고, 상태에 스크롤 위치를 저장하며, 누수를 막기 위해 화면이 바뀔 때 리스너를 정리하십시오.
자주 묻는 질문
“popstate 이벤트” 강의는 무료인가요?
네 — “popstate 이벤트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“popstate 이벤트”에서 뭘 배우나요?
브라우저의 뒤로 가기 및 앞으로 가기 탐색에 대응하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“popstate 이벤트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.