attr() 메서드와 prop() 메서드의 차이점

attr() Vs prop()

jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다.

이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.

attr()	prop()
HTML 의 속성(attribute)을 취급	JavaScript의 프로퍼티(property)를 취급
속성은 HTML Element에 있는 정보	프로퍼티는 JavaScript에서 사용하는 정보 (HTML의 정보와 일치 또는 불일치)

다음의 예시를 살펴보도록 합니다..

먼저 다음의 코드가 있다고 가정해봅니다.

html

<p><a href="#none" class="link">버튼</a></p>

javascript

var $goLink = $('.link');

console.log($goLink.attr('href'));
// #none 출력

console.log($goLink.prop('href'));
// http://localhost:63342/Project/srcFactory/study/test.html#none

하나의 예를 더 살펴보도록 합니다..

체크박스가 있을경우...

html

<input type="checkbox" name="" id="chk" checked="checked">

javascript

var $checkbox = $('#chk');

console.log($checkbox.attr('checked')); // checked

console.log($checkbox.prop('checked')); // true

attr() 메소드의 경우 체크박스를 클릭하여 체크를 해제해 보아도 값에 대한 변화가 없지만 prop() 메소드의 경우는 false로 변경되어 있을 것이다.

위 표에서도 간략히 설명해 놓았지만 attr() 메소드는 HTML에 작성된 속성값을 문자열로 받아오고 prop() 메소드는 자바스크립트의 프로퍼티를 가져오는 것이다.

속성(attribute)와 프로퍼티(property)는 실무에서 혼용하여 사용하기 때문에 혼란을 가져올 수 있을 것이다.

하지만 위 둘은 비슷하지만 엄연히 큰 차이를 가지고 있다.

attr() 사용시 

ㆍ HTML attribute 값이 모두 String 으로 넘어옴

prop() 사용시 

ㆍ 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있음 

Usage attr() 메서드

javascript

$('img').attr('width', function (index) {
    return (index + 1) * 100;
});

$('img').attr({
    width : function (index) {
        return (index + 1) * 100
    },
    height : 100
});

Jaehee's WebClub