History API란?
History 객체는 브라우저 내장 객체로, SPA 구현에 있어서 필수적인 API입니다. SPA는 브라우저에서 페이지를 새로 업로드 하지 않고도, History 객체의 url 정보를 가지고 화면에 렌더링합니다. MPA는 페이지 전환을 위해서 새로운 웹 페이지 리소스(html 파일 등)가 필요하였지만, SPA는 이러한 방식으로 초기 한 번의 리소스 요청만으로도 웹 에플리케이션 구현이 가능하도록 설계되었습니다.
History API 사용법
History.pushState()
pushState 함수는 History의 state 큐에 새로운 url 정보를 추가하고 현재 url도 기존에 추가된 상태로 업데이트합니다. 단, 현재 Origin값이 유지되는 형식에 한해서 추가 되어야 합니다.
const state = { 'page_id': 1, 'user_id': 5 } // history.state에 등록된 값
const title = '' // 상태에 대한 제목..? 대부분 브라우저에서 무시하는 값
const url = 'hello-world.html' // 업데이트될 url 정보
history.pushState(state, title, url)History.replaceState()
replaceState 함수는 History의 state 큐에서 pop한 뒤, 새로운 url 정보를 push하고 현재 url도 업데이트합니다. 단, 현재 Origin값이 유지되는 형식에 한해서 추가 되어야 합니다.
history.replaceState(null, '', 'bar2.html'); // pop하고 bar2.html을 url 정보로 대신합니다.
사용 사례
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<a class="LinkItem" href="/product-list">product list</a>
<a class="LinkItem" href="/article-list">article list</a>
<script>
const route = () => {
const { pathname } = window.location;
const $container = document.querySelector('#container');
console.log(pathname);
if(pathname === '/') {
$container.innerHTML = `<h1>Home</h1>`
}else if(pathname === '/product-list') {
$container.innerHTML = `<h1>상품 목록</h1>`
}else if(pathname === '/article-list') {
$container.innerHTML = `<h1>게시글 목록</h1>`
}
}
window.addEventListener('click', e => {
if(e.target.matches('.LinkItem')) {
e.preventDefault();
const { href } = e.target;
window.history.pushState(null, null, href);
route();
}
})
route()
</script>
</body>
</html>
