[jQuery] attr()와 prop() 사용법

1. 프로퍼티(Property)란?

- 객체 내부에 저장된 값 또는 기능을 나타내는 속성을 의미.

- 자바스크립트에서 모든 갹채는 프로퍼티를 가지고 이러한 프로퍼티는 해당 객체의 상태/동작을 나타낸다.

- 프로퍼티는 key와 value로 구성되며 객체의 속성에 접근하고 조작하는 방법을 제공한다.

 

2. attr() vs prop()

- prop()은 불리언(Boolean) 속성 값을 처리하는데 사용된다. (ex: checked, disabled)

- 이러한 불리언 속성은 attr()을 사용하여 설정하면 항상 문자열로 설정되므로, prop()을 사용하는 것이 더 정확한 동작을 보장한다.

- prop()은 내부적으로 더 빠른 성능을 제공하며, 요소의 프로퍼티를 조작에 더 적합하다. 또한, prop()을 사용하면 속성과 프로퍼티 간의 일관성을 유지할 수 있습니다.

 

1)  attr()

-  요소의 초기 속성 값을 가져오거나 설정해야 할 때 사용.

- HTML 속성이 변경되며, 이것은 HTML 코드에 영향을 미침.

ex) HTML에서 <input> 요소의 value 속성은 초기 값이며, 이 값을 가져오거나 설정할 때는 attr()을 사용해야 한다.

// 속성 값을 가져오기
var value = $('input').attr('value');

// 속성 값을 설정하기
$('input').attr('value', '새로운 값');

2. prop()

- 요소의 상태를 나타내는 프로퍼티 값을 조작할 때 사용.

- DOM 요소의 프로퍼티만 변경되고, HTML 코드에는 영향을 미치지 않음.

// 프로퍼티 값을 가져오기
var isChecked = $('input').prop('checked');

// 프로퍼티 값을 설정하기
$('input').prop('checked', true);

 

attr()과 prop()은 각각 다른 목적을 가지고 있으며, 상황에 따라 적절한 메서드를 선택하여 사용해야 한다.

---

출처: OpenAI의 GPT-3.5 기반으로 생성된 내용