[jQuery tip] attributes VS properties ( .attr() VS .prop() ) 차이 비교

○ 비교에 앞서..

와하하하하하하하...

1년 넘게 웹 개발하면서 jquery에서 attr과 prop 메서드의 차이가 있다는 걸 이제야 알다니....

아우 쪽팔려라..ㅋ

동료 개발자분이 checkbox 에 관해 물어보면서 같이 헤메기 시작!.ㅋㅋ

내용인즉슨.... 테이블의 한 행 전체에 click 이벤트를 걸어서 checkbox 에 동적으로 체크를 하겠다는 것.

최초 코딩 내용 >

<script>

$(function() {

        $('#tbl').on("click", "tr", function(e) {

               var $target = $(this).find('input:checkbox');

               if($target.is(':checked') === true) {

                       alert("checked is true")

                       $target.removeAttr("checked");

               }else {

                       alert("checked is false")

                       $target.attr("checked",true);

               }

        });

});

</script>

보면 알겠지만 동적으로 생성되는 테이블의 행이기 때문에 on 메서드로 click 이벤트를 연결하였고 

체크박스의 체크 여부를 판단하여 체크가 되어있으면 해제, 해제되어있으면 체크하도록 코딩하였다.

헌데 이놈이 최초 1회씩만 체크, 해제가 되더니 그 담부턴 아무 변화가 없다... ㄷㄷㄷ..

○ .attr() VS .prop() 차이점

이제부터 슬슬 본론 시작!

왜 이런고 하니.. jquery가 1.6 버전부터 .attr() 메서드를 .attr() 과 .prop() 로  세분화 했다고 한다.

애초에 HTML 속성을 취급하는 attributes 와 JavaScript 프로퍼티를 취급하는 properties 는 분리가 되어있어야 했는데

같이 사용하는 바람에 버그가 많아져서 어쩔수 없이 분리하게 되었다는군..

그러면 무엇이 다른 것인지 한번 비교해보자.

다음표는 jquery 사이트에서 발췌한 내용이다. ( http://api.jquery.com/prop/ )

elem.checked	true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )	true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6)	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+)	"checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6)	true (Boolean) Changed with checkbox state

실제로 어떻게 바뀌는지 아래에서 실습해보자.

Check me

정리하자면 1.6 이전에 attr("checked") 의 값은 프로퍼티값인 true 를 반환했는데

이게 1.6 이후에 prop("checked") 가 true 반환, attr("checked")가 문자열 값인 "checked" 를 반환한다는 것.

○ .attr() VS .prop() 올바른 적용

그럼 처음에 제대로 동작하지 않던 소스를 고쳐보자

수정 코딩 내용 >

<script>

$(function() {

        $('#tbl').on("click", "tr", function(e) {

               var $target = $(this).find('input:checkbox');

               if($target.is(':checked') === true) {

                       alert("checked is true")

                       $target.removeProp("checked");

               }else {

                       alert("checked is false")

                       $target.prop("checked",true);

               }

        });

});

</script>

attr -> prop만 바뀌었을 뿐인데....ㅋ

○ 마무리

근데 최종 소스는 뭐로 했는지 보여줘?

최종 코딩 내용 >

<script>

$(function() {

        $('#tbl').on("click", "tr", function(e) {

               $(this).find('input:checkbox').click();

        });

});

</script>

이딴거 신경안쓰고 기냥 클릭 처리로 끝. ㅋㅋㅋㅋㅋ