HTML5 매뉴얼

13-2-1.예제 분석

앞 장에서 만든 첫 번째 jQuery 예제를 분석해 보자. 별다른 동작은 없고 <h1> 엘리먼트를 찾아 배경을 노란색으로 변경한다.

이 문서에는 스타일시트가 없으며 <h1> 엘리먼트에 별도의 속성도 적용되어 있지 않다. 스크립트 코드에서 실행중에 이 엘리먼트를 찾아 스타일을 변경한 것이다. jQuery 코드는 딱 한 줄이다.

$('h1').css('background', 'yellow');

이 코드를 말로 풀어 보면 <h1> 엘리먼트를 찾아 스타일의 background 속성을 yellow로 바꾸라는 뜻이다. $('h1')이 h1 엘리먼트를 찾으라는 명령이고 css 함수가 스타일의 속성을 변경하라는 명령이다. 자바스크립트를 직접 사용한다면 다음과 같이 긴 코드를 작성해야 한다.

var hlist = document.getElementsByTagName("h1");

var h1=hlist[0];

h1.style.backgroundColor = "yellow";

태그 이름으로부터 목록을 찾고 첫 번째 <h1> 태그의 style.backgroundColor 속성에 "yellow"를 대입함으로써 색상을 변경한다. 아니면 <h1> 태그에 id를 주고 getElementById 메서드를 사용할 수도 있다. 보다시피 jQuery 구문보다 훨씬 더 길고 장황하다. jQuery는 검색 및 변경을 훨씬 더 짧게, 그것도 한번에 처리할 수 있어 명료할 뿐만 아니라 모든 브라우저에서 일관되게 잘 실행된다. jQuery는 간결함을 위해 압축된 문법을 사용하는데 위 예제의 원래 코드는 다음과 같다.

var jQ = jQuery('h1');

jQ.css('background', 'yellow');

jQuery는 전역 함수이며 이름이 의미하는 바대로 jQuery의 본체이다. 인수의 개수에 따라 여러 가지 형태로 사용되는데 선택자를 주면 해당 엘리먼트를 검색한다. 선택자로 'h1'을 주었으므로 문서 내의 모든 <h1> 엘리먼트를 찾는다. 굉장히 자주 사용되므로 jQuery 여섯 자를 다 쓰는 대신 $ 기호로 간략하게 별명을 정의해 놓았다. 그래서 다음과 같이 짧게 쓸 수 있다.

var jQ = $('h1');

jQ.css('background', 'yellow');

$도 자바스크립트의 적법한 명칭 문자이므로 함수명으로 사용할 수 있다. 그래서 jQuery라고 길게 쓰지 않으며 보통 $로 짧게 쓴다. 다만 다른 라이브러리와 명칭이 충돌하는 불가피한 경우에 한해서만 jQuery나 다른 별명을 정의해서 쓴다. $ 문자에 특별한 의미가 있는 것은 아니며 단순히 짧기 때문에 입력 편의를 위해 jQuery 함수에 대해 별명을 정의해 놓은 것이다. 눈에 띄는 특별한 이름을 붙여 놓으면 jQuery 코드임을 금방 알 수 있어서 좋다.

jQuery 함수는 jQuery 객체를 리턴한다. 이 객체에는 검색된 엘리먼트 목록이 저장되어 있으며 또한 엘리먼트를 관리하는 많은 메서드가 제공된다. css는 jQuery 객체의 메서드이며 속성을 조사 및 변경한다. 예제에서는 $ 함수가 리턴하는 객체를 jQ 변수로 받아 jQ의 css 메서드를 호출했다. 이 경우 jQ 객체는 메서드 호출을 위해서만 사용되므로 굳이 변수에 대입받을 필요없이 $ 함수가 리턴하는 객체로부터 바로 메서드를 호출할 수 있다.

$('h1').css('background', 'yellow');

그래서 이렇게 짧아지는 것이다. jQuery 객체의 메서드는 실행 후 jQuery 객체를 다시 리턴한다. 그래서 연쇄적인 호출이 가능하다. 만약 배경색뿐만 아니라 글자색도 파란색으로 바꾸고 싶다면 뒤쪽에 css 메서드 호출을 덧붙인다.

methodchain.html

<!DOCTYPE html>

<html>

<head>

<title>methodchain</title>

</head>

<body>

<h1>제목입니다.</h1>

$('h1').css('background', 'yellow').css('color', 'blue');

</script>

</body>

</html>

css 메서드가 jQuery 객체를 리턴하므로 이어서 css 함수를 또 호출해도 상관없다. 노란색 배경에 파란색 글자가 출력된다. 다른 스타일을 더 조정하면 경계선을 그릴 수도 있고 위치나 크기를 조정할 수도 있다.

이렇게 메서드를 줄줄이 호출하는 방식을 메서드 체이닝(Method Chaining)이라고 하는데 jQuery의 주요한 특징중 하나이면서 또한 장점이기도 하다. 한번 찾은 엘리먼트에 대해 여러 가지 조작을 동시에 가할 수 있다. 체이닝이 안된다면 다음과 같이 각 메서드에 대해 두 번 호출해야 한다.

$('h1').css('background', 'yellow');

$('h1').css('color', 'blue');

코드 줄 수가 두 줄로 늘어 났을 뿐만 아니라 <h1> 엘리먼트를 두 번 검색하는 중복된 처리를 하므로 속도에도 불리하다. 두 번 검색하는 것이 싫다면 앞의 코드처럼 검색 결과를 변수에 저장해 두고 이 변수를 통해 메서드를 호출하면 된다.

var jQ = $('h1');

jQ.css('background', 'yellow');

jQ.css('color', 'blue');

그러나 보다시피 이렇게 하면 코드는 더 길어지고 임시 변수를 만들어야 하므로 번잡하다. 이 코드를 말로 번역하면 다음과 같다.

h1을 찾는다.

배경을 노란색으로 바꾼다.

글자는 파란색으로 바꾼다.

이 세 명령을 합치면 "h1을 찾아 배경은 노랗게, 글자는 파랗게 바꾼다"와 같이 짧아진다. 체이닝을 하면 가로로 길어지지만 어쨌거나 한줄이어서 훨씬 더 짧고 명료하다. 또한 한번 검색한 결과를 최대한 재활용하므로 속도에도 유리하다. 그래서 jQuery는 체이닝을 적극적으로 권장한다.

처음 보면 복잡해 보이지만 자연어와 유사해서 익숙해지면 체이닝이 아주 편하다고 느낄 것이다. 그러나 너무 길게 쓰면 가로가 길어져 편집하기 불편하고 에러 발생시 정확한 위치를 판별하기 어렵다. 뭐든지 똑같지만 적당한 수준에서 사용해야 한다.