jQuery에서 attr vs prop 차이점과 사용법 정리

Query를 처음 다룰 때, attr()과 prop() 를 언제 어떻게 써야 하는지 헷갈린다. checked 옵션을 컨트롤 할 때도 attr로는 제어가 안되다가 prop로는 제어가 된다던가 하는 경우가 종종 있다. 실제로 이 두 메서드는 서로 다른 용도로 사용된다. 이번 글에서는 attr()과 prop()의 차이가 무엇인지, 그리고 어떤 상황에서 각각을 사용해야 하는지에 대해 정리해 보았다.

attr()와 prop()의 차이점

• attr(): HTML 요소의 속성(attribute) 값을 다루는 메서드이다. 즉, HTML 코드에 명시된 속성 값을 가져오거나 설정할 때 사용된다.
• prop(): DOM 요소의 **프로퍼티(property)**를 다루는 메서드이다. 이는 JavaScript에서 다루는 속성의 실제 상태를 가져오거나 설정할 때 사용된다.

간단히 말해, attr()은 HTML 속성 값을, prop()은 그 속성의 현재 상태를 제어하는 데 사용된다고 할 수 있다.

 

★ HTML 속성이란

 

HTML의 속성(attribute)은 HTML 요소에 추가적인 정보를 제공하는 역할을 한다. 속성은 요소의 시작 태그 안에 위치하며, 보통 이름="값"의 형태로 작성된다. 예를 들어, <a> 태그의 href 속성은 링크의 목적지를 정의하고, <img> 태그의 src 속성은 이미지를 불러올 경로를 지정한다.

속성은 요소의 동작을 제어하거나 스타일을 적용하는 데 중요한 역할을 하며, 다양한 HTML 요소에 적용될 수 있다. 각 속성은 특정한 목적과 기능을 가지며, 이를 통해 HTML 문서의 구조와 의미를 보다 풍부하게 표현할 수 있다.

 

예시로 보는 attr() vs prop()

1. 체크박스의 상태 제어

 

체크박스가 체크되어 있는지 확인하려면 prop()을 사용하는 것이 적절하다. 체크 상태는 HTML 속성이라기보다는 DOM의 현재 상태에 해당하기 때문이다.

// 체크박스가 체크되어 있는지 확인
var isChecked = $('#myCheckbox').prop('checked');
console.log(isChecked);  // true 또는 false

 

여기서 attr('checked')를 사용하면, 체크 상태와 상관없이 HTML에 checked 속성이 있으면 true를 반환한다. 따라서 실제 상태를 확인하려면 prop('checked')를 사용하는 것이 맞다.

 

2. 링크의 href 속성 가져오기

 

'a' 태그의 href 값을 가져올 때는 attr()을 사용하는 것이 적절하다. 이는 HTML 속성 자체를 가져오는 것이기 때문이다.

// 링크의 href 값 가져오기
var linkUrl = $('#myLink').attr('href');
console.log(linkUrl);  // 예: "https://example.com"

 

prop('href')도 작동할 수 있으나, 브라우저가 해석한 절대 경로가 반환될 수 있어 예상과 다른 결과를 얻을 수 있다. 따라서 URL을 다룰 때는 attr()을 사용하는 것이 좋다.

 

3. input의 disabled 상태 제어

 

input 요소의 disabled 상태를 설정하거나 확인할 때는 prop()을 사용하는 것이 적절하다. disabled는 DOM의 상태를 나타내기 때문이다.

// input 요소 비활성화
$('#myInput').prop('disabled', true);

 

만약 attr('disabled')를 사용하면, 단순히 HTML 속성에 disabled가 추가될 뿐, 실제로 요소가 비활성화되지 않을 수도 있다.

 

4. 이미지의 src 속성 변경

 

이미지 태그의 src 값을 변경할 때는 attr()을 사용하는 것이 적절하다. 이미지 경로는 HTML 속성으로 존재하기 때문이다.

// 이미지 경로 변경
$('#myImage').attr('src', 'newImage.png');

 

prop('src')를 사용할 수도 있으나, 보통 이미지 경로나 속성 값을 변경할 때는 attr()이 더 적합하다.

 

5. option 태그의 selected 상태 제어

 

드롭다운 메뉴에서 선택된 option을 변경하거나 확인할 때는 prop()을 사용하는 것이 적절하다. selected 상태는 HTML 속성이라기보다는 DOM의 상태를 나타내기 때문이다.

 

// 특정 option 선택
$('#mySelect option[value="option1"]').prop('selected', true);