ready() 함수가 필요한 이유

 

 

 

🌸 ready() 함수

웹 페이지에서 HTML 문서가 전부 로드된 직후에 자바스크립트 코드를 안전하게 실행하기 위한 함수

주로 jQuery에 많이 쓰였고, 요즘은 순수 JavaScript(DOM API) 방식으로도 동일한 역할을 한다

 

🌸 ready()가 필요한 이유

브라우저는 HTML을 위에서 아래로 읽는다

그런데 아직 생성되지 않은 HTML 요소를 JS로 조작하려면 오류가 발생한다

<script>
  document.getElementById("btn").onclick = function() {
    alert("클릭!");
  };
</script>
<button id="btn">버튼</button>

 

이 경우, btn이 아직 없어서 오류가 발생한다

그래서 HTML이 전부 만들어진 뒤에 JS를 실행하는 것이 ➡ ready

 

 

🌸 jQuery의 ready() 함수

기본 문법

$(document).ready(function() {
    // HTML DOM이 로드된 후 실행
});

 

 

축약형 (가장 많이 씀)

$(function() {

}                   

 

 

예제

<script>
$(function() {
    $("#btn").click(function() {
        alert("클릭됨!");
    });
});
</script>
<button id="btn">버튼</button>

 

 

---

 

 

 

 

 

구분	ready()	window.onload
실행 시점	DOM 로드 완료	모든 리소스 로드 완료
이미지, CSS	안 기다림	기다림
실행 속도	빠름	느림
주 용도	DOM 조작	이미지 크기 계산 등

 

 

 

 

 

 

 

 

 

 

순수 JavaScript (jQuery 없이)
요즘 jQuery 없이 이 방식이 표준이다 👇
DOMContentLoaded
document.addEventListener("DOMContentLoaded", function() { // DOM 준비 완료 });
짧게 쓰면

document.addEventListener("DOMContentLoaded", () => { console.log("ready 상태"); });
✔️ 기능은 $(document).ready()와 동일
✔️ jQuery 없어도 사용 가능

 

 

 

---

 

 

ready()는 HTML DOM이 준비되면 실행

DOM 조작 / 이벤트 연결 전에 필수