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

jQuery를 통해서 동적으로 화면 구성을 만들일이 많다.

그런 경우, selector를 통해 선택한 element나 append 하면서 새롭게 생성하는 element에 특정한 속성을 지정하게 되는 경우가 많은데 이 때 사용되어지는 함수가 attr() 또는 prop() 이다.

attr도 prop도 모두 속성값을 의미하는 attibute와 property를 의미하는 데 함수가 나눠져 있다는 것은 어쨌든 차이점이 있다는 말이므로, 비슷한 일을 하는 것 같으면서도 다른 듯한 이 두 함수의 차이점을 정리해보자.

 

 

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

 

가장 정확한 확인방법은 다른 무엇도 아닌 jquery 공식 사이트에서 제공하는 API를 참고하는 것 만한게 없는 듯 하다.
그래서 찾아봤더니, jquery에서도 두 함수의 차이점에 대해서 설명하고 있다. 
단, 1.6 버전을 기준으로 큰 차이가 있는 듯 하니, 참고하시길... (이제 1.6 이상으로 올려보심이...)

1.6 버전 이전에는 attr()에서 property와 attribute가 구분되지 않는 형태로 결과값이 제공되었다고 한다. 그래서 1.6 버전 이후로 어떤 함수를 써야하는가에 대해 일부 혼란이 있었다고 한다.
1.6 버전부터는 attr()는 속성 그 자체의 값을 반환하고 있으며, prop()는 속성값을 명시적으로 찾아낼 수 있는 방법을 제공한다.

(아 다 속성이고 속성이라고 하는데 뭔말인지 모르겠다)

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

하나의 예로 checkbox를 사례로 들어봅시다. (1.6버전 이상을 쓴다는 가정을 두고 작성)
아래와 같은 체크박스를 두 개 만들었다고 했을 때, 체크박스에 체크했을 때 기존의 값을 불러오는 방식과 변화되는 방식을 비교해보자

<input type="checkbox" id="test1" checked="checked"> test1
<input type="checkbox" id="test2"> test2 <br>
<div class="testlog"></div>

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

체크박스의 값이 변화할 때마다 각각의 값을 불러다가 div에 뿌리도록 설정했고
각각의 값을 아래와 같이 캡쳐해서 추가하였다.

 

아무 체크박스나 클릭하면 이벤트가 동작하므로, test2 체크박스를 클릭했다.
노란색으로 표시한대로 두번째 체크박스의 checked 여부가 바뀌었음에도 $("#test2").attr("checked") 값은 undefined다.
해당 체크박스에 체크를 하건 안하건 undefined다.

 

반응형

 

해당 값이 뜨는 이유는 최초 element 선언 시, checked 속성이 없었기 때문에 해당 속성자체를 찾을 수 없어서 undefined가 뜬다.
비교해서 보았을 때 첫 번재 체크박스의 경우는 checked로 뜬다.

 

위의 캡쳐화면과 달리 이번에는 첫 번째 체크박스를 해제했음에도 $("#test1").attr("checked") 의 값은 checked라고 뜬다.
체크박스에 있어서 attr를 통해 얻은 checked의 값은 신뢰할 수 없다.
이를 통해 확실해진것은 attr의 값은 최초 선언되었을 때의 속성값을 가져오는 것으로 보여진다.

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

그리고 위에서 설명했던 prop()는 속성값을 명시적으로 나타낸다는 의미도 이를 통해 확인할 수 있는데
attr()는 checked의 값을 checked로 표현하고 있는데, prop()는 실제적으로 checked를 true 혹은 false로 표현하여 실제 체크되어있는가 아닌가를 알 수 있도록 명시적으로 값을 나타낸다.

 

★★★★ jquery API 참고 결과 ★★★★
form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는 경우는 .prop()를 사용하는 것을 권장한다.

 

결론적으로 정리하자면

.attr() 을 통해서는 element가 가지는 속성값이나 정보를 조회 (style, src, rowspan 등) 하거나 세팅하는 형식의 업무를 하고
.prop() 를 통해서는 element가 가지는 실제적인 상태 (활성화, 체크, 선택여부 등) 를 제어하는 업무를 하는 것이 좋겠다.

 

 

아.. 이렇게 정리해서 알아두고도 매번 라디오버튼, 체크박스 동적으로 생성해놓고 값 불러올 때마다 다시금 헷갈린다.
조만간 미래의 나를 위해 form 요소의 값 세팅 및 조회 방법을 유형별로 나열해볼까 한다.

미래의 나는 좋겠다. 과거의 내가 열일해서 ㅎ_ㅎ