웹 페이지가 닫히거나 다른 페이지로 이동하여 언로드(unload)되는 시점에 특정 자바스크립트 코드를 실행하고 싶다면 onunload 속성을 활용할 수 있습니다. 이 속성은 브라우저에서 문서가 언로드되는 순간 자동으로 트리거되며, 주로 세션 정리, 로그 기록, 사용자에게 작별 메시지 표시 등의 용도로 사용됩니다.
onunload 속성 기본 개념
onunload는 <body> 태그에 지정할 수 있는 이벤트 핸들러 속성입니다. 사용자가 페이지를 벗어나거나 브라우저 탭을 닫을 때 호출되며, 속성 값으로 실행할 자바스크립트 함수 이름을 넣어주면 됩니다.
예제 코드
아래 예제는 페이지가 언로드될 때 display() 함수를 호출하여 경고창을 띄우는 간단한 구현입니다.
<!DOCTYPE html>
<html>
<body onunload = "display()">
<h2>Tutorialspoint</h2>
<h3>Simply Easy learning</h3>
<script>
function display() {
alert("Bye!");
}
</script>
</body>
</html>위 코드를 실행한 후 페이지를 새로고침하거나 다른 곳으로 이동하면, 언로드 이벤트가 발생하면서 "Bye!"라는 경고창이 나타나는 것을 확인할 수 있습니다.
주의사항과 최신 대안
onunload 속성은 과거에 널리 사용되었지만, 현재는 폐기 예정(deprecated) 상태입니다. 모바일 브라우저에서는 신뢰성이 떨어지고, 일부 환경에서는 아예 동작하지 않을 수 있습니다. 또한 페이지 복원(bfcache) 기능과 충돌할 가능성도 있습니다.
따라서 실무에서는 다음과 같은 최신 이벤트를 사용하는 것이 권장됩니다.
- pagehide 이벤트: 페이지가 숨겨질 때 발생하며, bfcache와 호환되어 안정적으로 동작합니다.
- beforeunload 이벤트: 사용자가 페이지를 떠나기 직전에 실행되며, 저장되지 않은 변경 사항이 있을 때 확인 창을 표시하는 용도로 적합합니다.
정리하자면, 학습 목적이나 레거시 코드 유지보수 시에는 onunload의 동작 방식을 이해해두는 것이 좋지만, 새로운 프로젝트에서는 pagehide나 beforeunload 이벤트 리스너를 사용하는 것이 더 안전하고 현대적인 접근 방식입니다.