자바스크립트 이전 페이지로 이동하기(뒤로 가기)

올바른 이해와 사용 방법

자바스크립트에서 이전 페이지로 이동하려면 window.history.back() 메서드를 사용합니다.

이렇게 하면 사용자가 브라우저의 '뒤로 가기' 버튼을 눌렀을 때처럼 이전 페이지로 이동합니다.

구문

window 객체는 생략할 수 있으며, 보통 history.back()를 사용합니다.

참고하세요!
window.history.back() 메서드는 줄여서 history.back()라고만 작성하는 경우도 많습니다.
브라우저에서는 window 객체가 전역 객체이므로, window.history는 줄여서 history만으로도 동일하게 사용할 수 있습니다.

특징

브라우저의 '뒤로 가기' 버튼과 동일한 동작을 수행합니다.
브라우저의 현재 방문 기록(Session History)을 사용합니다.
브라우저의 현재 방문 기록(Session History)에 이전 페이지 기록이 없는 경우에는 아무런 동작도 하지 않습니다.

기본 예제

버튼 클릭 시 이전 페이지로 이동하기 onclick 속성으로 버튼을 클릭했을 때, 이전 페이지로 이동하기

<button type="button" onclick="history.back()">이전 페이지로 이동하기</button>
<!-- 또는 -->
<button type="button" onclick="window.history.back()">이전 페이지로 이동하기</button>

버튼 클릭 시 이전 페이지로 이동하기 addEventListener() 메서드로 버튼을 클릭했을 때, 이전 페이지로 이동하기

<button type="button" id="back-btn">이전 페이지로 이동하기</button>

<script>
    const backBtn = document.getElementById("back-btn");
    
    backBtn.addEventListener("click", () => {
        history.back();
        // 또는 window.history.back();
    });
</script>

주의할 점

window.history.back()은 브라우저의 '뒤로 가기' 버튼과 동일한 동작을 수행하기 때문에, 실제 이전 페이지가 어디인지 이 메서드로는 확인할 수 없습니다. 따라서, window.history.back()을 사용할 때에는 사용자의 실제 방문 흐름에 따라 이동 결과가 달라질 수 있다는 점을 고려하여 UX(User Experience, 사용자 경험) 흐름을 설계해야 합니다.