.attr()와 .prop()의 차이

오늘 문득 회사에서 개발을 하다가 attr과 prop을 사용해야 하는 일이 생겼다. 나는 솔직하게 말 하면 메번 찾아서 쓰거는 둘중 하나 찍어서 사용한다. 그래서 오늘은 .attr()와 .prop()의 차이에 대해 글을 써볼려고 한다.

.attr()와 .prop() 똑같은거 아니야 ?

나도 글을 쓰면서 처음 알았는데 예전에는 똑같다고 했는데 jQuery 1.6 이후 부터 .attr() 함수가 용도에 따라 .attr() 과 .prop() 으로 분리 되었다.

1.6 버전부터는 attr()는 속성 그 자체의 값을 반환하고 있으며, prop()는 속성값을 명시적으로 찾아낼 수 있는 방법을 제공한다.

각각

• attr()
  HTML의 속성(attribute)를 취급

• prop()
  HTML의 프로퍼티(property)를 취급

예를 들어보면 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked 및 defaultSelected는 .prop () 메서드를 사용하여 검색하고 설정해야한다.

하나의 예로 오늘 변경 했던 체크박스를 예제를 들어보겠다.
다음과 같이 체크 박스를 만들었다고하면, 체크 했을 때 기준의 값을 불러오는 방식과 변화하는 방식을 살펴보자.

<input type="checkbox" id="check1" checked="checked"> check1
<input type="checkbox" id="check2"> check2 <br>
<div class="testlog"></div>

$("input:checkbox").change("on", function() {
    $("div.testlog").html("<br/> check1 .attr('checked') : " + $("#check1").attr("checked") +
        "<br/> check2 .attr('checked') : " + $("#check2").attr("checked")
        + "<br/> check1 .prop('checked') : " + $("#check1").prop("checked")
        + "<br/> check1 .is(':checked') : " + $("#check1").is(":checked")
    );
});

각각 체크박스의 값이 변화 할때 마다 값을 뿌려주는 div을 만들어 두었다.

결과를 보면, 노란색으로 표시한대로 두번째 체크박스의 checked 여부가 바뀌었음에도 $("#check2").attr("checked") 값은 undefined다.
해당 체크박스에 체크를 하건 안하건 undefined다.

해당 값이 뜨는 이유는 최초 element을 선언했을 당시에 checked속성이 없기에 해당 속성자체를 찾을 수 없어서 undefined이 뜨는 것이다.

위의 결과값에서 볼 수 있는 것과 같이 첫번째 체크박스를 해제 했음에도 $("#check1").attr("checked") 의 값은 checked라고 뜬다.
따라서 체크박스에 있어서 attr를 통해 얻은 checked의 값은 신뢰할 수 없다. 이를 통해 알수 있는 것은 attr의 값은 최초 선언 됬을 때의 속성값을 가져오는 것이라고 알 수 있다.

반면 prop를 이용해 가져 온 checked의 속성값은 체크여부에 따라 변하지 않는 것을 볼 수 있다. 이 뿐만 아니라 element의 체크여부를 확인하는 is 함수의 값 역시도 실제 값이 반영되어져 보인다.

또한 위에서 말 했던 prop()는 속성값을 명시적으로 나타낸다는 의미도 이를 통해 알수 있었는데 attr()는 checked의 값을 checked로 표현하고 있는 반면에 prop()는 실제적으로 checked를 통해 참 또는 거짓을 표현하여 실제 checked가 되었는지 알 수 있도록 명시적으로 값을 나타낸다고 볼 수 있다.

요약하지면
attr()는 element가 가지는 속성값이나 정보를 조회 (style, src, rowspan 등) 하거나 세팅하는 방식으로 사용하고
prop()는 통해서는 element가 가지는 실제적인 상태 (활성화, 체크, 선택여부 등) 를 제어하는 방식으로 사용하면 좋을 것 같다.