window.history 객체는 현재 브라우저 창의 세션 기록을 나타내는 JavaScript API입니다. 이 객체를 사용하면 브라우저 창의 이전 페이지 및 다음 페이지로 이동하거나, 이전 페이지로 돌아가는 등의 조작을 할 수 있습니다.
window.history 객체에는 다음과 같은 메서드와 속성이 있습니다.
메서드:
- history.back(): 브라우저 창의 이전 페이지로 이동합니다.
- history.forward(): 브라우저 창의 다음 페이지로 이동합니다.
- history.go(n): n이 0보다 크면 브라우저 창의 다음 n번째 페이지로 이동하고, n이 0보다 작으면 이전 n번째 페이지로 이동합니다.
- history.pushState(state, title, url): 현재 페이지의 이력 스택에 새로운 항목을 추가합니다. 이 때, state 객체는 페이지 상태를 나타내는 객체이며, title은 새로운 항목의 타이틀, url은 새로운 항목의 URL입니다.
- history.replaceState(state, title, url): 현재 페이지의 이력 스택에서 가장 최근 항목을 제거하고, 새로운 항목을 추가합니다. 이 때, state 객체는 페이지 상태를 나타내는 객체이며, title은 새로운 항목의 타이틀, url은 새로운 항목의 URL입니다.
속성:
- history.length: 브라우저 창의 이력 스택에 저장된 페이지 수를 반환합니다.
- history.state: 현재 페이지의 상태를 나타내는 객체를 반환합니다. 이 속성은 history.pushState() 또는 history.replaceState() 메서드를 사용하여 추가한 상태 객체를 반환합니다.
window.history 객체는 HTML5에서 새로 추가된 API입니다. 이전의 브라우저에서는 지원되지 않을 수 있습니다. 또한, 브라우저 창의 이력 스택에는 보안 상의 이유로 JavaScript 코드를 통해 접근할 수 없는 제한이 있을 수 있습니다.
참고로 history.pushState(), history.replaceState() 이 두 메서드는 url을 변경 시키지만 페이지를 이동 시키지 않습니다.
리액트 라우터가 이걸 이용하는 것 같습니다.