History api (pushState, replaceState)

 

https://programmers.co.kr/skill_check_assignments/199

프로그래머스

 

 평소 리액트로만 주고 코딩을 했고 자바스크립트 구현에 익숙하지 않아 공부하기 위해 바닐라 자바스크립트 구현 과제테스트를 풀어보았다. 바닐라 자바스크립트로 SPA를 구현할때 가장 중요한 페이지 라우팅을 구현할 때 필요한 history api를 정리해 보았습니다.

 

 

 

 

1. History api

History api란 history 글로벌 객체를 이용해 브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공하는 것으로

즉 현재  페이지를 불러온 탭 또는 프레임의 방문기록을 조작 할 수 있는 방법을 제공한다.

 

 

history.length - 세션 히스토리에 들어있는 요소들의 개수 확인

history.back() - 뒤로가기

history.forward() - 앞으로가기

history.go(숫자) - 숫자만큼 이동

 

 

✨history.pushState(state, unused, url) - 브라우저의 세션 기록 스택에 항목을 추가해준다.

첫번째 인자는 바뀐 주소와 함께 저장할 데이터 객체이고, 두번째 인자는 역사적인 이유로 존재해서 생략할 수 없고 빈 문자열을 전달하는것이 안전하고, 세번째 인자는 바뀔 주소입니다.

 

세번째 url로 바뀔 주소를 전달해주면 주소창은 바뀌지만 실제 페이지 이동은 안되기때문에 따로 렌더링을 처리를 해줘야한다.

 

 

✨history.replaceState(state, unused, url) - 브라우저의 세션 기록 스택에 항목을 갈아끼워버린다.

replace란 말처럼 뒤로가기로 원래 url로 갈 수 없다.

 

 

pushState나 replaceState를 호출만하면 이벤트가 트리거되지 않는데, 뒤로가기나 앞으로가기 할때 popstate 이벤트가 발생됩니다. popstate 이벤트 발생 후 history.state 에 접근하면 이전 state를 가져올 수 있습니다.

그 정보들을 이용해 다시 렌더링 할 수 있습니다.