제이쿼리 attr(), prop() 차이 정리

attribute, property 직역하면 한국어로 '속성'으로 의미가 같아 혼란이 올 것이다.

쓰임새와 사용법도 비슷하여 헷갈릴 여지가 많아 쉽게 정리하였다.

대기업이나 중소기업 모두 단골 면접문제이기도 하였다.

 

1. attribute (attr)

어트리뷰트(attribute)는 HTML 태그에 지정된 속성을 의미한다.

 

<input type="text" name="userId" id="userId" class="input">

 

여기서 type, name, id, class는 HTML의 어트리뷰트(attribute, 속성)다. 크롬 DevTools(f12)에서 Elements에서 노출된다.

 

제이쿼리 attr() 함수는 해당 attribute 값을 가져오거나 설정할때 사용된다.

 

let classNm = $("#userId").attr("class"); // 클래스 값 가져오기
$("#userId").attr("class", "test"); // 클래스 값 설정하기

 

2. property (prop)

프로퍼티(property)는 HTML 요소의 JavaScript 객체 속성을 나타낸다.

프로퍼티 이벤트 프로퍼티, 엘리먼트 프로퍼티, 노드 프로퍼티 등이 있는데

가장 이해하기 쉬운 예시로는 엘리먼트 프로퍼티의 input radio, checkbox의 checked를 예시로 들겠다.

 

<input type="checkbox" name="termAgree" id="termAgree" class="input">

 

해당 checkbox에 checked가 true인지 false인지 크롬 DevTools(f12)에서 Elements에서 노출되지 않는다는 차이가 있다.

disabled, checked, selected등도 해당이 된다.

 

제이쿼리 prop()은 DOM 요소의 프로퍼티 값을 가져오거나 설정하는데 쓰인다.

 

let isCheck = $("#termAgree").prop("checked"); // 'checked' 프로퍼티 값을 가져옴
$("#termAgree").prop("checked", true); // checked 프로퍼티의 값을 true 설정

 

3. 제이쿼리 버전 1.6 이전과 이후

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

 

현재에서는 사용되지 않지만 제이쿼리 1.6이전에는 사실 작업자 입장에서 버그성으로 여겨졌었다. 1.6부터 패치되어져 attr()과 prop()의 쓰임새가 명확해졌다.