jQuery attr() vs prop()

돌덩이·2025년 5월 27일

jquery js

목록 보기

4/7

오늘은 jQuery를 사용하면서 DOM 조작할 때 자주 사용하는 attr()와 prop()의 차이점에 대해 알아보겠습니다.

❓ 속성(attribute)? 프로퍼티(property)?

본 주제에 앞서 DOM 객체에서의 속성과 프로퍼티의 차이에 대해 먼저 알아보겠습니다.

속성 (attribute)

속성은 HTML 문서 태그에 선언되어 있는 초기 정보를 말합니다. 즉 HTML 문서를 로드하여 DOM 객체로 파싱할 때 HTML 태그에 설정되어 있는 값들이 DOM의 속성 값이 됩니다.

프로퍼티 (property)

프로퍼티는 DOM 객체의 실제 속성을 뜻합니다. 현재 DOM 요소의 상태정보를 갖고 있기 때문에 이벤트 핸들러 등을 통해 상태를 변경하거나 제어할 수 있습니다. 초기 값은 속성(attribute)으로 초기화되어 있으며 이후 사용자나 시스템에 의해 변경될 수 있습니다.

즉 사용자에게 실제로 보여지는 것은 DOM의 프로퍼티입니다. 사용자가 행동을 통해 화면을 조작하면 프로퍼티가 변경되는 것이며 속성은 변경되지 않습니다.

📌 attr() vs prop()

결론부터 이야기 하자면, attr()는 DOM 객체에서 HTML 속성을, prop()는 프로퍼티를 읽고 변경합니다.

	<input id="chkBox" type="checkbox" checked>
	
    const $chkBox = $('#chkBox');
	$chkBox.attr('checked');	// "checked" (attribute)
	$chkBox.prop('checked');	// true

위의 예시를 보면 attr()는 html 태그 안에 있는 checked 속성을 그대로 가져옵니다. 반면 prop()의 경우 화면 상에서 사용자에게 보이는 체크박스의 체크 여부를 가져오고 있습니다.

이제 해당 값을 수정해보겠습니다.

	<input id="chkBox" type="checkbox" checked>

	// 수정1
    const $chkBox = $('#chkBox');
	$chkBox.prop('checked', false);
	$chkBox.attr('checked');	// "checked" (변동X)
	$chkBox.prop('checked');	// false

prop()를 통해 수정해도 attr()의 값은 변함이 없다는 것을 알 수 있습니다. 그럼 반대로 attr()를 통해 수정해보겠습니다.

	<input id="chkBox" type="checkbox" checked>
      
    const $chkBox = $('#chkBox');
	// 수정2-1
	$chkBox.attr('checked', false);
	$chkBox.attr('checked');	// "false"
	$chkBox.prop('checked');	// true (변동X)

	// 수정2-2
	$chkBox.removeAttr('checked');
	$chkBox.attr('checked');	// undefined
	$chkBox.prop('checked');	// true (변동X)

반대도 마찬가지로 checked의 속성 값을 수정하거나 없애도 prop()의 결과에는 영향이 없습니다. 화면상에서도 체크박스의 박스 실제 체크여부는 prop()에서 관리하기 때문에 attr()를 통해 checked 속성을 제거하더라도 여전히 체크된 상태를 유지합니다.

checked와 마찬가지로 boolean 속성을 갖는 selected, disabled 속성도 prop()값을 기준으로 화면에 반영이 됩니다. 이 뿐만 아니라 <input type="text"> 의 value도 prop()을 통해 상태 및 화면에 표기되는 값을 갖고 있습니다.

📌 attr() 사용처

이렇게만 보면 attr()은 prop()에 비해 쓸모가 없는 것처럼 보입니다만 attr()를 사용해야 하는 경우도 많습니다. 예시를 통해 알아보겠습니다.

    // 사용처1 - 일반 속성 조작 (id, class, href 등)
	<input id="chkBox" type="checkbox" checked>
    <a id="link" href="https://oldsite.com">링크</a>
      
    const $chkBox = $('#chkBox');
	const $link = $('#link');

    $chkBox.attr('class', 'primary-chk');
	$link.attr('href', 'https://newurl.com');
    $chkBox.attr('class');	// "primary-chk"
	$link.attr('href');		// "https://newurl.com"

	// 사용처2 - 커스텀 속성 조작 (data-*)
	<div id="item1" data-id="item1" data-role="admin" ></div>

	const $div = $('#item1');
    
    $div.attr('data-id'); // "item1"
	$div.attr('data-id', 'item2');
    $div.attr('data-role', 'user');	
	$div.attr('data-id'); // "item2"
	$div.attr('data-role'); // "user"

attr()도 특정 일반 속성이나 커스텀 속성을 제어할 때 많이 사용합니다. class, href, src와 같은 속성은 변경되면 화면에 영향을 줍니다. 요소의 상태 값이 아닌 HTML 속성 그 자체를 다뤄야 할 때 attr()를 사용하면 유용합니다.