개요
HTML5에서 history API에 pushState와 replaceState가 추가되었다. 개념은 대충 알고 있었지만 웹 프론트를 개발할 때 react를 사용하고 있고 react-router-dom이라는 라이브러리로 히스토리를 조작하기 때문에 직접적으로 사용할 일은 없다가 이번에 목록을 뿌려주는 페이지의 검색 조건과 페이지 번호를 유지해야할 일이 생겨 해당 API를 사용하게 되면서 정리의 필요성을 느끼게 되었다.
SPA에서 페이지 라우팅
SPA는 말 그대로 하나의 페이지로 구성된 앱을 뜻하며 실제로 앱이 구동되고 사용되는동안 사용자는 단 하나의 HTML파일만 보게된다. 이벤트에 의해 컨텐츠의 변경이 필요할 경우 새로운 HTML파일을 불러오는 것이 아닌 DOM을 조작해 컨텐츠를 변경하게된다.
하지만 SPA에서도 페이지의 구분은 필요하다.
- 공유받은 링크를 클릭해서 특정 페이지로 바로 접근
- 검색 엔진 최적화를 위해 페이지 단위로 분할
뿐만 아니라 페이지 단위로 개발해야 앱의 구조 파악이 용이하며 설계 또한 쉬워진다. 즉 실제 페이지는 하나지만 논리적인 페이지들이 필요하다.
하지만 브라우저의 url을 변경(location.href)하게 되면 다시 같은 HTML을 불러오게 되고 모든 정적 자원들을 새로 로딩하게 되며 앱의 상태 또한 초기화 되어버린다. 따라서 브라우저의 url을 변경하여 해당 url에 매핑된 페이지를 동적으로 랜더링 하되, 실제 요청은 진행되면 안된다.
이때 사용되는 것이 pushState, replaceState다. 이 API는 url을 변경하되 브라우저는 url로 실제 요청은 하지 않는다. 따라서 현재 페이지(HTML)을 유지하되 변경된 url에 해당하는 페이지를 랜더링 할 수 있다.
pushState, repalceState, 그리고 popstate
pushState, replaceState는 히스토리를 조작하는데 여기서 히스토리는 단순하게 url만 뜻하는게 아니라 state도 포함한다. 즉 상태를 히스토리에 저장 가능하다는 말이고 해당 히스토리로 이동하게 되면 저장된 상태를 꺼내 사용할 수 있음을 뜻한다.
state를 사용하려면 window객체에 popstate 이벤트를 추가하면 되고 popstate 이벤트가 발생되는 시점은 pushState, replaceState로 저장한 히스토리에 브라우저의 뒤로가기 버튼, history.back()을 통해 도달 했을 경우이다.
