[jQuery] attr(), prop() 차이 알아보기

제이쿼리를 쓰면서 헷갈리는 점이 항상 있다.

버튼을 비활성화(disabled)하거나 체크박스를 선택(checked)하는 작업이 필요할 때..!

 

// 버튼 비활성화
$("#btn").attr("disabled", true);
$("#btn").prop("disabled", true);

// 체크박스 선택
$("#chk").attr("checked", true);
$("#chk").prop("checked", true);

 

둘 다 잘 되는데 뭘 써야 하는 걸까?

알아보기 전에 기본적인 사용법을 파악해보자!

 

 

• attr(attributeName) : 속성의 값을 가져온다.
• attr(attributeName, value) : 속성의 값을 설정한다. (value type : String or Number or null)

attr의 특이한 부분은 value를 null로 설정할 시 해당 속성이 제거된다고 한다. (removeAttr() 과 동일함)

 

 

• prop(propertyName) : 속성의 값을 가져온다.
• prop(propertyName, value) : 속성의 값을 설정한다. (value type : Anything)

prop의 특이한 부분은 value 값에 제한되는 타입이 없다는 점이다.

 

 

정리해보니 차이점이 보이는 것 같다.

attribute와 property !!

 

<button id="btn" class="next">확인</button>

 

위 코드의 id, class 를 attribute 라고 한다. (key = "value")

attr() 을 통해서 해당 속성을 조회하거나 설정 할 수 있다.

 

<input type="checkbox" id="chk" checked="checked">	// attr()
<input type="checkbox" id="chk">			// prop() & 클릭

 

attr() 을 통해서 체크박스를 제어해준다면 새로운 attribute가 생긴다.

하지만 prop()를 사용하거나 체크박스를 선택하면 input 태그에는 변화가 없다.

 

왜 그럴까...?

 

property 는 html DOM tree 에 존재하고 있다..!

input DOM tree

사용자의 액션이나 자바스크립트 제어로 인해서 바뀔 수 있는 내부적인 속성 값이라고 이해하면 되겠다.

 

 

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

 

jQuery 홈페이지 설명 중 일부분이다.

1.6버전부터 .attr()이 undefined 를 반환한다고 설명하면서

form 요소의 checked, selected, disabled 에는 .prop()를 사용하라고 한다!

 

 

결론은 attr()은 태그 안의 속성 값을 조회하거나 설정할 때 사용한다고 보면 될 것이고

사용자의 액션이나 스크립트 제어 등 상태 변화가 자주 발생되는 속성은 prop()를 사용한다고 이해하면 되겠다.

 

자주 헷갈리던 checked, disabled 에는 prop()로 통일해주는 게 맞는 것 같다!