JavaScript window.location.reload()로 웹페이지 새로고침하는 방법

JavaScript로 웹페이지를 새로고침하려면 Window Reload 이벤트를 사용해야 합니다. 이 글에서는 가장 간단한 한 줄 코드 방법부터 실무에서 자주 사용되는 버튼 클릭 이벤트 방식까지 단계별로 알아보겠습니다.

한 줄의 JavaScript로 페이지 새로고침하기

가장 간단한 방법은 브라우저 콘솔(Console)을 활용하는 것입니다. 아래 코드를 브라우저 개발자 도구의 콘솔에 붙여넣고 Enter 키를 누르면 페이지가 즉시 다시 로드됩니다.

window.location.reload()

간단하지만, 매번 콘솔을 열어 실행해야 하기 때문에 실제 서비스에서는 그다지 실용적이지 않을 수 있습니다. 이번에는 사용자가 직접 새로고침을 트리거할 수 있는 방법을 살펴보겠습니다.

버튼 클릭 이벤트로 페이지 새로고침하기

실무에서 가장 많이 사용되는 방식은 버튼 클릭 시 페이지를 새로고침하는 것입니다. 먼저 HTML 마크업에 다음과 같이 버튼을 추가합니다.

<button onclick="reloadPage()">Reload page</button>

그다음 JavaScript 파일에 window reload 이벤트를 실행하는 함수를 작성합니다.

function reloadPage() {
    window.location.reload()
}

이제 버튼을 클릭할 때마다 reloadPage() 함수가 호출되어 현재 페이지가 다시 로드됩니다. 필요에 따라 함수 안에 새로고침 전 확인 알림이나 데이터 저장 로직을 추가할 수도 있습니다.

참고 사항

window reload 이벤트는 CodePen 편집기 내부에서는 정상적으로 작동하지 않습니다. CodePen에서 테스트하려면 디버그 모드(Debug Mode)를 사용해야 합니다.