자바스크립트(JS) History API로 페이지 전환하기 | VanillaJS 라우팅

History API ?

history API는 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체다. 페이지 이동뿐만 아니라 뒤로가기, 앞으로 가기 등 조작이 가능하게 제공해준다. url이동만 해주고 화면을 리렌더링해주지는 않는다.

1. history.back()

브라우저의 뒤로가기 버튼을 누른 것과 동일한 기능이다.
이 메서드는 비동기식이다

history.back()

2. history.forward()

history.back()와 반대로 앞으로 가기 기능이다.
이 메서드는 비동기식이다

history.forward()

3. history.go()

원하는 위치로 페이지를 이동 시킬 수 있다. 파라미터는 이동할만큼의 숫자를 넣어주면 된다.
양수를 넣으면 양수만큼 앞으로, 음수를 넣으면 뒤로 페이지가 이동된다.
이 메서드는 비동기식이다

// 인자값이 없거나 0 -> 페이지 새로고침
history.go() or history.go(0)

// 뒤로 가기
history.go(-1)

// 앞으로 가기
history.go(1)

---

여기부터는 html5에서 새로 추가된 url 변경 메소드다.

4. history.pushState()

새로운 주소목록을 추가한다. 때문에 이전 url의 주소가 남아있어 브라우저의 뒤로가기 버튼이 활성화된다.

pushState(state, unused, url)

state: 데이터 객체를 전달할 수 있다. history.state로 받아올 수 있음
unused: 브라우저의 타이틀을 나타냄. "이 매개변수는 역사적 이유로 존재하며 생략할 수 없습니다. 빈 문자열을 전달하는 것은 메서드에 대한 향후 변경에 대해 안전합니다." 라고 한다..
url: 변경할 url 주소. 경로만 써줘도 되고, querystring도 추가할 수 있다.

const state = { 'page_id': 1, 'user_id': 5 }
const url = 'main.html'

history.pushState(state, '', url)

5. history.replaceState()

history.pushState()와 동일한 기능은 하지만, 주소목록에 추가하지 않기 때문에 뒤로가기 버튼이 활성화 되지 않는다.

const stateObj = { foo: 'bar' };
history.replaceState(stateObj, '', 'bar2.html');