window.onload가 여러 번 호출될 수 있는 경우와 해결 방법

window.onload가 여러 번 호출될 수 있는 경우와 해결 방법

window.onload는 한 번만 실행될까?

window.onload 이벤트는 일반적으로 페이지가 완전히 로드된 후 한 번만 실행됩니다. 하지만 특정한 경우에서는 여러 번 호출될 수도 있습니다. 이 글에서는 window.onload가 여러 번 실행될 수 있는 이유와 이를 방지하는 방법을 살펴보겠습니다.

window.onload가 여러 번 실행되는 주요 원인

1. 스크립트 중복 등록
   같은 window.onload 핸들러가 여러 번 정의되거나 덮어쓰기되면 여러 번 실행될 가능성이 있습니다. window.onload = function() { console.log("첫 번째 onload 실행"); }; window.onload = function() { console.log("두 번째 onload 실행"); }; 위 코드에서는 두 번째 핸들러가 첫 번째를 덮어쓰기 때문에 console.log("첫 번째 onload 실행")은 호출되지 않습니다.
2. addEventListener 사용으로 다중 핸들러 등록
   addEventListener("load", callback)을 사용하면 동일한 이벤트에 여러 개의 핸들러를 추가할 수 있습니다. window.addEventListener("load", function() { console.log("첫 번째 이벤트 리스너 실행"); }); window.addEventListener("load", function() { console.log("두 번째 이벤트 리스너 실행"); }); 이 경우 두 개의 핸들러가 모두 실행됩니다.
3. iframe을 동적으로 생성하는 경우
   동적으로 iframe을 추가하면 onload 이벤트가 실행됩니다. let iframe = document.createElement("iframe"); iframe.src = "about:blank"; document.body.appendChild(iframe); iframe.onload = function() { console.log("iframe의 onload 실행"); };
4. SPA (Single Page Application)에서 페이지 이동
   React, Vue, Angular 같은 SPA 환경에서는 history.pushState 등을 사용해 가짜 새로고침이 발생할 수 있으며, 일부 경우 window.onload가 다시 실행될 수 있습니다.

window.onload 중복 실행 방지 방법

1. 덮어쓰기 대신 addEventListener 사용 window.addEventListener("load", function() { console.log("onload 실행"); }); 이렇게 하면 기존 핸들러를 덮어쓰지 않고 추가만 하므로 코드의 예측 가능성이 높아집니다.
2. 중복 실행 방지 플래그 설정 let isLoaded = false; window.onload = function() { if (!isLoaded) { isLoaded = true; console.log("onload 실행"); } }; 위와 같이 플래그(isLoaded)를 사용하면 onload가 여러 번 실행되는 것을 방지할 수 있습니다.
3. SPA 환경에서는 DOMContentLoaded 이벤트 활용 document.addEventListener("DOMContentLoaded", function() { console.log("DOMContentLoaded 실행"); }); SPA에서는 window.onload보다 DOMContentLoaded를 활용하는 것이 더 적절할 수 있습니다.

결론

• window.onload는 원래 한 번만 실행되지만, 특정 조건에서는 여러 번 실행될 수 있습니다.
• 중복 등록 방지, addEventListener 사용, 플래그 설정 등의 방법을 활용하면 불필요한 실행을 방지할 수 있습니다.
• SPA에서는 DOMContentLoaded를 활용하는 것이 보다 적절한 해결 방법이 될 수 있습니다.

위 방법을 활용하여 불필요한 window.onload 실행을 방지하고, 안정적인 웹 애플리케이션을 개발하세요!