HTML pushState 상태 객체란 무엇이고 어떻게 활용할까?

HTML pushState 상태 객체란?

pushState는 HTML5 History API에서 제공하는 메서드로, 페이지를 새로고침하지 않으면서 브라우저의 세션 기록(history)에 새 항목을 추가할 수 있게 해줍니다. 이때 첫 번째 인자로 전달되는 것이 바로 상태 객체(state object)입니다.

상태 객체는 히스토리 항목과 함께 저장되는 JavaScript 객체로, 사용자가 뒤로 가기나 앞으로 가기를 통해 해당 히스토리 항목으로 이동할 때 그대로 복원됩니다. 이를 활용하면 SPA(싱글 페이지 애플리케이션)에서 페이지 상태를 유지하며 자연스러운 탐색 경험을 제공할 수 있습니다.

pushState로 히스토리 항목 생성하기

다음은 선택한 색상 정보를 상태 객체에 담아 새로운 히스토리 항목을 만드는 예제입니다.

function display(color) {
    var myState = { selectedColor: color },
        myTitle = "페이지 제목",
        myPath = "/" + color;
    
    history.pushState(myState, myTitle, myPath);
}

위 코드에서 myState는 선택된 색상 정보를 담고 있는 상태 객체입니다. 이 객체는 URL 변경 없이도 현재 화면의 상태를 기록하는 역할을 하며, 나중에 히스토리를 탐색할 때 다시 꺼내 쓸 수 있습니다.

popstate 이벤트로 상태 복원하기

사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 누르면 popstate 이벤트가 발생합니다. 이 이벤트를 처리하면 저장해 둔 상태 객체를 읽어와 페이지를 업데이트할 수 있습니다.

$(window).on('popstate', function(event) {
    var myState = event.originalEvent.state;
    
    if (myState) {
        selectColor(myState.selectedColor);
    }
});

pushState 메서드의 인자 정리

• state: 히스토리 항목에 저장할 상태 객체로, 직렬화 가능한 일반 객체여야 합니다.
• title: 대부분의 브라우저에서 현재는 무시되지만, 향후 사용을 위해 문서 제목을 지정합니다.
• url: 주소창에 표시될 URL로, 같은 출처(origin) 내의 경로만 허용됩니다.

주의 사항

상태 객체에는 문자열, 숫자, 배열 등 직렬화 가능한 데이터만 저장하는 것이 좋습니다. DOM 요소나 함수 같은 직렬화할 수 없는 값은 저장할 수 없으며, 용량 제한(브라우저별로 약 640KB 내외)도 고려해야 합니다. 또한 popstate 이벤트는 페이지가 처음 로드될 때는 발생하지 않으므로, 초기 상태 처리는 별도로 구현해야 합니다.