jQuery attr(), prop() 차이점 알아보기!

안녕하세요.
오늘은 jQuery에서 속성값을 다루는 attr()과 prop()에 대해 포스팅하려고 합니다. 자바스크립트의 DOM 요소를 다루면서 태그마다 특수한 기능을 가진 요소가 있습니다. 오늘 예제를 통해 다뤄볼 요소는 a, input, checkbox, radio 태그를 이용하여 attr(), prop() 기능을 다루는 방법과 차이점을 알아보도록 하겠습니다.

---

attr()

attr : attribute를 줄인 용어로 태그의 속성 값을 key, value 구조로 태그에 등록하여 다루는 기능으로 html 기준의 속성값이라고 이해하면 됩니다.

prop()

prop : property를 줄인 용어로 태그의 고유 속성 값을 다루는 기능으로 javascript 기준의 속성값이라고 이해하면 됩니다.

그럼 간단한 예제를 통해서 태그별, 속성별 사용 방법을 알아보도록 하겠습니다.

---

1. attr()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    console.log('a 태그의 href 속성 정보 : ' + $('#atagId').attr('href'));
    console.log('checkbox 태그의 checked 속성 정보 : ' + $('#checkboxId').attr('checked'));
});
</script>
<div>
    <!-- a tag -->
    <a href="/test" id="atagId"></a>
    <!-- checkbox tag -->
    <input type="checkbox" id="checkboxId" checked="checked"/>
</div>

위의 예제 소스 코드를 보게 되면 a 태그와 input checkbox 태그를 생성해 줬습니다. 그리고 jQuery를 통해 각 요소별로 attr() 사용하여 속성 값을 가져왔습니다.

---

실행 결과

a 태그는 href의 속성값을, checkbox 태그는 checked의 속성값을 가져온 실행 결과 화면입니다.
만약 속성값을 태그에 설정하지 않았다면 undefined로 반환되게 됩니다.

반응형

---

2. prop()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    console.log('a 태그의 href 속성 정보 : ' + $('#atagId').prop('href'));
    console.log('checkbox 태그의 checked 속성 정보 : ' + $('#checkboxId').prop('checked'));
});
</script>
<div>
    <!-- a tag -->
    <a href="/test" id="atagId"></a>
    <!-- checkbox tag -->
    <input type="checkbox" id="checkboxId" checked="checked"/>
</div>

attr() 예제 소스 코드와 동일하며, 속성을 호출하는 부분만 수정을 하였습니다. 결과가 어떻게 다른지 확인해 보겠습니다.

---

실행 결과

attr()을 통해 속성을 호출했을 때와는 결괏값이 조금 다르게 나왔습니다. attr()은 태그에서 설정한 속성값 기준으로 불러오지만 prop()는 태그 내의 고유 속성값을 기준으로 호출하기 때문에 다른 속성값을 가져오게 됩니다.

---

마무리

오늘은 이렇게 jQuery에서 제공하는 attr()과 prop()의 사용 방법 및 차이점을 알아봤습니다. javascript에서 태그 요소의 속성값을 다루는 것은 활용도가 매우 높기 때문에 이렇게 차이점을 정리해 두는 것도 좋을 것 같아서 포스팅하게 됐습니다.


그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다. :)

---