jQuery 철학

jQuery 철학은 “Write less, do more”이다.

이 철학은 다음 세가지 개념으로 나누어 볼 수 있다.

(1) 몇몇 요소(DOM elements)를 찾아서 jQuery 객체 메소드를 사용하여 어떤 작업을 수행한다.

다음 코드를 보자.

// 페이지의 모든 div를 숨긴다.
jQuery('div').hide();
//
// 모든 div의 내부 텍스트를 변경한다.
jQuery('div').text('new content');
//
// 모든 div에 updatedContent 클래스를 추가한다.
jQuery('div').addClass("updatedContent");
//
// 페이지에 모든 div를 나타낸다.
jQuery('div').show();

위 코드에서 보는 것처럼 jQuery함수를 이용하여 페이지에 있는 div를 찾아내어 여러가지 함수를 사용하여 특정 기능을 수행한다.

(2) 요소의 집합에 대해 여러 jQuery 객체 메소드를 체인으로 연결한다.

본 블로그의 “$ vs $()” 글을 보면 다음과 같은 얘기가 나온다.

“jQuery selection을 통해 호출되는 메소드들은 $.fn namespace에 정의되어 있고,  해당 selection을 this로 (자동적으로) 받고, 그 selection을 this로 리턴한다.”

위 설명에서 보는 바와 같이 this로 받고 this로 리턴하는 특성 때문에 체인 형태로의 연결이 가능하다.

즉, (1)의 예제코드는 다음과 같이 깔끔하게 표현이 가능하다.

jQuery('div').hide().text('new content').addClass("updatedContent").show();

(3) jQuery wrapper set을  암시적인 반복을 통해 사용한다.

먼저 jQuery wrapper set이라고 하는 이유는 다음과 같다.

jQuery(selection)의 형태로 만들어지는 객체는 선택된 DOM요소들이 집합(set)의 형태로 존재하고, 이것들이  jQuery 기능으로 둘러쌓였다(wrapped)는 것을 뜻한다. 가령 (1)의 예제코드에서 jQuery(‘div’)는 페이지에 div DOM 요소가 4개면  4개의 div DOM 요소들이 집합의 형태로 존재하며, 이것들이 모두 jQuery의 기능을 사용, 즉 jQuery객체 메소드를 호출할 수 있다는 의미이다.

암시적인 반복이란, 이러한 집합안의 DOM 요소들이 반복적으로 해당 기능을 수행할 수 있다는 뜻이다.

즉, (1)의 예제코드에서 jQuery(‘div’).hide(); 라는 코드는 4개의 모든 div DOM 요소들을 숨길 수 있는 코드라고 할 수 있다.

이는 본 블로그의 “유틸리티 메소드” 글에서 소개된 each 메소드를 통해 가능하다.

위의 세가지 개념을 통해 jQuery의 철학을 잘 이해하면, 그 만큼  jQuery 코드를 쉽게 이해하고 유용하게 사용할 수 있을 것이다.