jQuery에서 $(document).ready()와 $(document).on() 차이점 완벽 정리!

서론: 당신의 jQuery 코드, 올바르게 사용하고 있나요?

웹 개발을 하다 보면 jQuery의 $(document).ready()와 $(document).on()을 자주 사용하게 됩니다. 하지만 이 둘의 차이를 정확히 이해하고 사용하고 있을까요? 만약 두 개념을 혼동하면 동적으로 추가된 요소가 이벤트를 인식하지 못하거나, 코드가 예상대로 작동하지 않을 수 있습니다.

예를 들어, 버튼을 클릭하면 알림 창이 뜨도록 코드를 작성했는데, 동적으로 추가된 버튼에는 작동하지 않는다면? 아마도 $(document).on()을 사용해야 할 상황에서 $(document).ready()를 사용했기 때문일 가능성이 큽니다.

이번 글에서는 $(document).ready()와 $(document).on()의 차이를 명확히 설명하고, 각각의 사용법을 실제 예제와 함께 살펴보겠습니다.

본론: $(document).ready()와 $(document).on()의 차이점

1. $(document).ready()란?

$(document).ready()는 HTML 문서가 모두 로드되었을 때 실행되는 함수를 정의하는 방법입니다. 즉, DOM(Document Object Model)이 완전히 로드되면 실행되며, 이미지나 외부 리소스의 로딩 여부는 신경 쓰지 않습니다.

✅ 사용 예제

Javascript

$(document).ready(function() {
    $("#myButton").click(function() {
        alert("버튼이 클릭되었습니다!");
    });
});

위 코드는 #myButton 요소가 클릭되면 알림 창을 띄우는 기능을 합니다. 하지만 이 코드에는 한 가지 중요한 단점이 있습니다. 바로 동적으로 추가된 요소에는 이벤트가 적용되지 않는다는 점입니다.

✅ $(document).ready()의 특징 정리 (표 1)

장점	단점
DOM이 준비된 후 즉시 실행됨	동적으로 추가된 요소에는 적용되지 않음
코드 실행 시점을 명확하게 제어 가능	이벤트 바인딩이 한 번만 이루어짐
빠른 로딩 속도

2. $(document).on()이란?

$(document).on()은 동적으로 생성된 요소에도 이벤트를 바인딩할 수 있는 강력한 기능을 제공합니다. 이 방식은 **이벤트 위임(Event Delegation)**을 활용하여 부모 요소에 이벤트를 등록하고, 자식 요소가 해당 이벤트를 감지하도록 만듭니다.

✅ 사용 예제

Javascript

$(document).on("click", "#dynamicButton", function() {
    alert("동적으로 생성된 버튼이 클릭되었습니다!");
});

위 코드에서는 #dynamicButton이라는 요소가 존재하지 않더라도, 나중에 추가되었을 때 클릭 이벤트가 정상적으로 동작합니다. 이는 이벤트가 문서(document)에서 위임되었기 때문입니다.

✅ $(document).on()의 특징 정리 (표 2)

장점	단점
동적으로 추가된 요소에도 적용 가능	모든 이벤트가 상위 요소를 거쳐 처리되므로 성능 저하 가능
코드 유지보수가 용이함	특정 요소에만 이벤트를 적용하고 싶다면 범위를 명확히 지정해야 함
이벤트 위임을 통해 메모리 사용 효율 증가

3. 두 가지 방법 비교 및 실제 사례

✅ 비교 표 (표 3)

비교 항목	$(document).ready()	$(document).on()
실행 시점	DOM이 준비된 직후	이벤트가 발생할 때
동적 요소 적용	❌ 불가능	✅ 가능
코드 유지보수	일반적인 경우 적합	동적 요소가 많을 경우 적합
성능	빠름 (단일 요소)	성능 저하 가능 (이벤트 위임 필요)

🛠️ 실전 예제 1: 동적 리스트 항목 추가

아래는 사용자 입력을 받아 동적으로 리스트 항목을 추가하는 코드입니다.

Html

<ul id="myList">
</ul>
<button id="addItem">항목 추가</button>

Javascript

$(document).ready(function() {
    $("#addItem").click(function() {
        $("#myList").append("<li class='list-item'>새로운 항목</li>");
    });

    // $(document).ready()를 사용하면 동적으로 추가된 항목에 이벤트가 적용되지 않음
    $(".list-item").click(function() {
        alert("리스트 항목 클릭됨");
    });
});

위 코드에서는 새로 추가된 리스트 항목에는 클릭 이벤트가 적용되지 않습니다. 이를 해결하려면 $(document).on()을 사용해야 합니다.

Javascript

$(document).on("click", ".list-item", function() {
    alert("리스트 항목 클릭됨");
});

이제 동적으로 추가된 리스트 항목에도 클릭 이벤트가 적용됩니다.

🛠️ 실전 예제 2: 삭제 버튼 이벤트 적용

Html

<div id="container">
    <button class="delete-btn">삭제</button>
</div>
<button id="addDeleteBtn">삭제 버튼 추가</button>

Javascript

$("#addDeleteBtn").click(function() {
    $("#container").append('<button class="delete-btn">삭제</button>');
});

// $(document).ready()로 하면 기존 버튼만 적용됨
$(".delete-btn").click(function() {
    alert("삭제 버튼 클릭됨");
});

이 경우도 $(document).on()을 활용하면 동적으로 추가된 삭제 버튼도 정상적으로 동작합니다.

Javascript

$(document).on("click", ".delete-btn", function() {
    alert("삭제 버튼 클릭됨");
});

마치며

$(document).ready()와 $(document).on()은 jQuery에서 이벤트를 바인딩하는 중요한 방식입니다. $(document).ready()는 초기 DOM 로딩이 끝난 후 실행되지만, 동적으로 추가된 요소에는 적용되지 않습니다. 반면, $(document).on()은 이벤트 위임을 통해 동적으로 추가된 요소에도 이벤트를 적용할 수 있습니다.

📌 핵심 요약

•
정적인 요소에는 $(document).ready()가 적합합니다.

•
동적으로 생성되는 요소에는 $(document).on()을 사용해야 합니다.

•
이벤트 위임을 활용하면 메모리를 절약하고 유지보수가 쉬워집니다.

이제 여러분의 jQuery 코드가 더욱 강력해졌습니다! 😊