JSP

[jQuery] - $(document).ready(function() { ... });

jaycheol 2025. 5. 10. 21:11
반응형

$(document).ready(function() { ... }); 구문은 jQuery의 핵심 기능 중 하나로, JavaScript 코드가 HTML 문서가 완전히 로딩된 이후에 실행되도록 보장하는 메커니즘입니다.

✅ 기본 개념

 
$(document).ready(function() {
    // 여기에 DOM이 완전히 로드된 후 실행할 코드를 작성
});


즉, <body> 태그 안에 있든 <head>에 있든 관계없이, DOM이 준비되었을 때 정확하게 실행된다는 장점이 있습니다.

✅ 왜 중요한가?

HTML 요소들이 아직 로딩되지 않은 상태에서 JavaScript가 실행되면, 아래와 같은 문제가 발생할 수 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Clicked!");
});

위 코드가 <body>의 myButton이 생성되기 전에 실행되면 오류가 발생하거나 이벤트가 동작하지 않습니다.

👉 해결책: DOM 준비 후 실행

$(document).ready(function() {
    $("#myButton").click(function() {
        alert("Clicked!");
    });
});

#myButton 요소가 존재한 이후에 바인딩되므로 정상적으로 동작합니다.

✅ jQuery ready의 내부 동작

  • document.ready는 DOMContentLoaded 이벤트와 유사하게 동작
  • jQuery는 브라우저 호환성을 고려해 내부적으로 다양한 이벤트를 감지함
  • jQuery가 로딩되자마자, DOM 상태를 감시하다가 준비 완료 시 콜백을 실행

✅ ES6 이후로는 이렇게도 가능 (순수 JS)

document.addEventListener("DOMContentLoaded", function() {
    // DOM 완성 후 실행
});

 

최신 브라우저에서는 jQuery 없이도 위처럼 처리하는 게 일반적입니다.

✅ 결론 요약


항목 설명
역할 DOM이 완전히 로드된 후 JavaScript 코드 실행
장점 HTML 요소가 모두 생성된 후에 코드를 실행하므로 오류 방지
대체 최신 브라우저에서는 DOMContentLoaded 이벤트로 대체 가능
사용 예 Ajax 호출, 이벤트 바인딩, 초기화 함수 실행 등
 
반응형