jQuery에서 $(document).ready()가 갖는 의미

jQuery를 이용하여 스크립트 코드를 작성하다보면 가장 많이 사용하게 되는 구문이 있다. 

$(document).ready(function() {
   // DOM이 로드되었을 때 실행되어야 하는 코드
});

이 구문은 개발자로 하여금 어떤 함수 또는 코드가 호출 또는 실행되는 시점을 스케쥴링할 수 있게 해준다. 그 시점은 바로 문서객체모델이라고 하는 DOM (Document Object Model)이 모두 로딩되었을 때인데 이렇게 $(document).ready() 안에 위치한 코드를 DOM이 모두 준비된 이후에 실행되게끔 해준다. 

이 $(document).ready() 함수는 다음과 같이 이미 정의해놓은 함수를 인자로 받을 수 있다. 

function Hello() {
  $("div.msg").addClass("letter");
}

$(document).ready(Hello);

만일 위에서 정의한 Hello() 함수가 다른데서 다시 사용할 일이 없는 함수라면 다음과 같이 anonymous function 즉 익명함수의 형태로 사용할 수 도 있다. 

$(document).ready(function() {
  $("div.msg").addClass("letter");
});

이와 같이 어떤 함수를 생성하고 그 함수를 $(document).ready()의 인자로 전달하게 되면 해당 함수에 대한 레퍼런스(reference)가 jQuery  전역객체의 일부분으로 저장되는데 이 레퍼런스는 이후 DOM 이 준비되고나면 호출되는 것이다. 

jQuery가 나오기 오래 전부터 자바스크립트를 해 본 사람이라면 자바스크립트 window 객체의 onload  이벤트핸들러에 함수를 지정하는 것과 비슷한 역할을 하는 것이 아닐까 생각할 수 있는데 onload 이벤트 핸들러는 페이지를 구성하는 모든 리소스 즉, HTML 뿐만 아니라 이미지까지  불러온 시점에서 호출되는 데 반해 $(document).ready() 함수는 리소스가 아닌 DOM 객체가 생성되어 준비되는 시점에서 호출된다. 따라서 많은 이미지로 구성된 페이지의 경우라면 순서상 ready() 함수가 먼저 실행되고 그 다음에 onload 이벤트 핸들러가 실행된다. 즉, $(document).ready() 함수는 페이지를 구성하고 있는 모든 이미지가 브라우저상에 렌더링될 때까지 기다릴 필요없이 DOM이 준비되기만 하면 바로 실행된다. 

정리하자면 $(document).ready() 구문은 이 구문안에 있는 코드가 실행되기 전에 페이지를 구성하는 DOM 객체를 먼저 로딩한다는 것을 보장해주는 역할을 한다. 따라서 DOM 객체를 다루는 코드를 사용한다면 반드시 이 구문안에 해당 코드를 위치시켜야 제대로 작동하는 것을 확인할 수 있다.