자바스크립트 히스토리 (history) 알아보기 !

 

 

 

안녕하세요.
오늘은 자바스크립트의 히스토리(history) 기능에 대해 정리해보려고 합니다. 히스토리 기능은 브라우저의 페이지를 다루는 기능이며, 서버 통신 없이 간단하게 페이지 전환이 가능한 기능입니다. 물론 요즘 많이 사용하는 SPA framework (react.js, vue.js, angular.js 등)를 사용하면 라우터 처리 및 페이지 전환 기능이 잘 구현되어 있어 사용할 경우가 많지는 않지만 자바스크립트의 순 기능들이 필요한 경우가 꼭 한 번씩 올 때가 있습니다! 그렇기 때문에 히스토리 기능의 동작 원리를 정리해 두시면 도움이 많이 되실 겁니다 :)
그럼 바로 알아볼까요?!

---

1. back

현재 페이지에서 뒤로 한 페이지 이동

history.back();

history.back()의 기능은 현재 페이지에서 한 페이지 뒤로가는 기능입니다. 더 이상 뒤로 갈 페이지가 없으면 아무 반응이 없습니다.

---

2. forward

현재 페이지에서 앞으로 한 페이지 이동

history.forward();

history.forward()의 기능은 현재 페이지에서 한 페이지 앞으로 가는 기능입니다. 더 이상 앞으로 갈 페이지가 없으면 아무 반응이 없습니다. history.back()의 반대로 이동하는 기능입니다.

---

3. go

현재 페이지를 기준으로 지정된 페이지로 이동, 지정된 페이지는 숫자값으로 입력

// 1페이지 뒤로가기
history.go(-1);
// 2페이지 뒤로가기
history.go(-2);
// 현재 페이지 새로고침
history.go(0);
// 1페이지 앞으로가기
history.go(1);
// 2페이지 앞으로가기
history.go(2);

history.go()의 기능은 현재 페이지에서 지정된 페이지로 이동할 때 사용되는 기능입니다. 현재 페이지를 0으로 두고 현재 페이지보다 뒤의 페이지면 뒤로 가는 페이지 수만큼 -n, 현재 페이지보다 앞의 페이지면 앞으로 가는 페이지 수만큼 n

-2	-1	0	1	2
2 페이지 전	1 페이지 전	현재 페이지	1 페이지 앞	2 페이지 앞

위처럼 이해하면 좋습니다!

반응형

---

4. pushState

history에 현재 주소를 추가하는 기능

history.pushState(null, 'test', '/test');

history.pushState()는 history에 변경할 주소 정보를 추가하는 기능입니다. 해당 기능의 특징으로는 페이지의 reload 없이 주소가 변경이 되며, 비동기처리 화면에서 reload없이 주소 변경할 때 유용합니다.

---

pushState(인자 1, 인자 2, 인자 3);

1. 인자 1 : 세션 히스토리에 넣을 데이터 (Object 형식이며, 넣을 값이 없으면 null로 입력)
2. 인자 2 : 변경할 브라우저의 제목 (string 형식이며, 넣을 값이 없으면 null로 입력)
3. 인자 3 : 변경할 브라우저의 URL

---

5. replaceState

현재 history의 주소창을 변경하는 기능

history.replaceState(null, 'test', '/test');

history.replaceState()는 history에 변경할 주소 정보를 변경하는 기능입니다. 해당 기능의 특징으로는 페이지의 reload 없이 주소가 변경이 되며, pushState와는 다르게 변경된 주소가 주소목록에 저장하지 않기 때문에 뒤로가기 기능이 적용되지 않습니다. 비동기처리 화면에서 reload없이 주소 변경할 때 유용합니다.

---

 

replaceState(인자 1, 인자 2, 인자 3);

1. 인자 1 : 세션 히스토리에 넣을 데이터 (Object 형식이며, 넣을 값이 없으면 null로 입력)
2. 인자 2 : 변경할 브라우저의 제목 (string 형식이며, 넣을 값이 없으면 null로 입력)
3. 인자 3 : 변경할 브라우저의 URL

---

마무리

오늘은 이렇게 자바스크립트의 히스토리(history) 기능에 대해 정리해 봤습니다. 내용은 간단하면서 알고 있으면 frontend 개발을 할 때 다양하게 활용할 수 있습니다!


그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다 :)

---