jQuery의 .data(), .attr(), .prop() 각각 다른 사용 용도 알아보기 ✨

안녕하세요 여러분! 🙌🏼

오늘은 jQuery를 활용해 DOM 요소에 데이터를 저장하고 조작하는 방법을 알아보겠습니다. 특히 .data(), .attr(), .prop() 메서드를 중심으로 설명해볼텐데요. 저도 코드를 짜면서 어떻게 데이터를 저장하는 것이 좋을지 고민이 많았는데 이번 기회에 한번 정리해보려고 합니다 ㅎㅎ

---

🎯 1. .data() 메서드

먼저 .data() 메서드는 임시 데이터를 요소에 저장하고 불러오기 위한 jQuery 메서드입니다! jQuery의 데이터 캐시라는 특별한 저장소를 이용하기 때문에 성능도 좋은 편이에요.

//데이터 설정
$('.element').data('key', 'value');

//데이터 가져오기
const value = $('.element').data('key');
console.log(value); //출력 : value

중요! 📝 .data()는 HTML의 data-* 속성과 상호작용할 수 있습니다. 즉, HTML 요소에 이미 data-* 속성이 있다면 이를 jQuery의 .data() 메서드로 접근할 수 있습니다. 그리고 이 data-*는 HTML에서 보여지지 않기 때문에 개발자도구에서 확인할 수 없습니다.

<!-- HTML 요소 -->
<div class="element" data-key="initialValue"></div>

// jQuery 데이터 가져오기 (HTML의 data-* 속성과 상호작용)
const initialValue = $('.element').data('key');
console.log(initialValue); // 출력: initialValue

꿀팁! 💡 .data()는 임시 데이터를 빠르게 저장하고 접근할 때 유용합니다. 예를 들어, DOM 요소에 임시 데이터를 저장해두고 이를 다른 함수나 이벤트에서 꺼내 쓸 때 사용하면 좋습니다.

🎯 2. .attr() 메서드

이제 .attr() 메서드에 대해 알아볼텐데요. 이 메서드는 HTML 속성을 설정하거나 가져올 때 사용됩니다. 아주 다양한 HTML 속성을 다룰 수 있어요!

// 속성 설정
$('.element').attr('href', 'https://example.com');

// 속성 가져오기
const href = $('.element').attr('href');
console.log(href); // 출력: https://example.com

.attr() 메서드는 HTML의 일반적인 속성을 설정하거나 가져오는 데 사용됩니다. 예를 들어, href, src, title, data-* 속성 등을 다룰 수 있습니다.

// data-* 속성 설정
$('.element').attr('data-key', 'newValue');

// 속성 가져오기
const dataValue = $('.element').attr('data-key');
console.log(dataValue); // 출력: newValue

중요! 📝 .attr()는 우리가 설정한 값을 HTML 코드에 그대로 반영합니다. 브라우저의 개발자 도구에서 직접 확인할 수 있어요.

꿀팁! 💡 .attr()는 요소의 속성을 조작할 때 자주 사용됩니다. 특히 링크의 href, 이미지의 src, 폼 요소의 value 등을 설정하는 데 유용합니다.

🎯 3. .prop() 메서드

마지막으로 .prop() 메서드입니다. 이 메서드는 DOM 요소의 속성(property) 값을 설정하거나 가져오는 메서드입니다. 특히 boolean 속성(checked, selected 등)에 많이 사용돼요.

// 속성 설정
$('.checkbox').prop('checked', true);

// 속성 가져오기
const isChecked = $('.checkbox').prop('checked');
console.log(isChecked); // 출력: true

.prop() 메서드는 DOM 요소의 속성을 조작하는 데 사용됩니다. Boolean 속성뿐만 아니라, element의 여러 속성을 다룰 수 있습니다.

중요! 📝 .prop()는 HTML 속성보다는 JavaScript의 속성을 조작합니다. Boolean 속성을 다룰 때는 .prop() 사용을 추천드립니다!

꿀팁! 💡 .prop()는 폼 요소의 상태를 설정하거나 확인할 때 자주 사용됩니다. 예를 들어, 체크박스가 체크되어 있는지 확인하거나, 라디오 버튼이 선택된 상태를 설정하는 데 유용합니다.

---

📝 .data(), .attr(), .prop()의 공통점과 차이점

이제 이들의 공통점과 차이점을 한 눈에 정리해볼게요:

공통점

• 모두 jQuery 메서드로, DOM 요소의 데이터 및 속성을 조작할 수 있습니다.

차이점

메서드	용도	HTML 반영 여부	주로 사용되는 경우
.data()	임시 데이터 저장/불러오기	❌ (보이지 않음)	임시 데이터나 페이지 리로드 전 데이터 저장
.attr()	HTML 속성 설정/가져오기	⭕ (HTML에 반영)	링크, 이미지, 폼 요소 속성 설정 및 조작
.prop()	DOM 요소 속성 설정/가져오기	❌ (JavaScript 속성)	Boolean 속성 (checked, selected 등) 조작

언제 각각을 사용하는 것이 좋은가요?

1. .data():
   • 임시 데이터 저장: HTML 코드에 반영하지 않는 임시 데이터를 빠르게 저장하고 가져올 때 사용합니다.
   • Ex: DOM 요소에 임시 데이터를 저장하고 다른 이벤트에서 이를 참조할 때.
2. .attr():
   • HTML 속성 조작: HTML 코드에 반영되어야 하는 속성을 설정하거나 가져올 때 사용합니다.
   • Ex: 링크의 href, 이미지의 src, 폼 요소의 value 등의 속성을 설정할 때.
3. .prop():
   • Boolean 속성 조작: JavaScript 속성을 조작하는데 특히 boolean 속성을 다룰 때 사용합니다.
   • Ex: 체크박스가 체크되어 있는지 확인하거나 설정할 때, 라디오 버튼이 선택된 상태를 설정할 때.

📌 결론

jQuery의 .data(), .attr(), .prop() 메서드는 각각 다른 용도로 사용되며 효과적으로 DOM 요소를 조작하고 데이터를 관리할 수 있게 해줍니다:

• .data()는 데이터 캐시에 임시 데이터를 저장하고 불러오는 데 유용합니다.
• .attr()는 HTML 속성을 직접 설정하고 가져오는 데 사용됩니다. HTML 코드에 반영됩니다.
• .prop()는 DOM 요소의 JavaScript 속성을 설정하고 가져오는 데 사용됩니다. Boolean 속성 조작에 특히 유용합니다.

이 세 가지 메서드의 차이점을 잘 이해하고 필요에 맞게 사용하면 jQuery를 더욱 효율적으로 활용할 수 있습니다. 실무에서도 요긴하게 쓰이는 팁들까지 기억해 주세요! 😊