jQuery data()와 attr() 차이점 정리 (사용법, 예제)

jQuery data()와 attr() 차이점 

jQuery에서 값을 저장/조회할 때

data()와 attr()을 많이 사용합니다.
둘은 비슷해 보이지만

저장되는 위치, 자료형, 동작 방식(캐싱)

이 완전히 다릅니다.

---

1) data()란?

data()는 HTML 속성(attribute)을 직접 바꾸는 게 아니라,
jQuery가 관리하는 내부 데이터 저장소(메모리)에 값을 저장합니다.

✅ 값 저장

 

$('#btn').data('count', 10); $('#btn').data('info', { id: 1, name: 'kim' });

✅ 값 조회

 

$('#btn').data('count'); // 10 $('#btn').data(); // 저장된 데이터 전체(Object 형태)

✅ 값 삭제

 

$('#btn').removeData('count');

---

2) attr()란?

attr()은 말 그대로 HTML attribute(속성) 를 읽고/쓰기 합니다.
즉, DOM에 실제로 박혀 있는 문자열 값을 다룹니다.

✅ 값 저장

 

$('#btn').attr('data-count', '10'); $('#btn').attr('title', 'hello');

✅ 값 조회

 

$('#btn').attr('data-count'); // "10" (항상 문자열)

✅ 값 삭제

 

$('#btn').removeAttr('data-count');

---

3) 핵심 차이 요약 (제일 중요)

구분data()attr()

저장 위치	jQuery 내부(메모리)	HTML attribute(DOM)
자료형	number/object/boolean 등 유지	무조건 문자열(string)
적용 범위	JS에서만 의미 있음	HTML에 실제로 남음
실무 사용	상태값/임시데이터에 좋음	속성 제어/렌더링에 필요

---

4) ⭐ 실무에서 가장 많이 터지는 함정: data() 캐시 문제

아래 상황이 “data() 값이 왜 안 바뀌지?”의 대표 원인입니다.

상황: attr로 바꿨는데 data()가 반영 안 됨

 

<div id="box" data-count="1"></div>

 

$('#box').data('count'); // 1

 

$('#box').attr('data-count', '2'); // DOM 속성은 바뀜

 

$('#box').data('count'); // 여전히 1이 나올 수 있음 (캐시)

 

✅ 이유

• jQuery는 처음 data('count')를 읽는 순간,
  data-count 값을 내부 캐시에 저장해두는 경우가 있습니다.
• 이후 attr()로 DOM 속성을 바꿔도,
  data()는 캐시 값을 계속 반환할 수 있습니다.

 

✅ 해결 방법(택1)

 

$('#box').removeData('count'); // 캐시 제거 후 다시 읽기

 

$('#box').data('count'); // 다시 읽으면 2로 반영될 수 있음

 

또는 한 방식만 일관되게 사용하는 게 제일 안전합니다.

---

5) 그럼 언제 data()를 쓰고, 언제 attr()을 쓰나?

✅ data() 추천 상황

• 클릭 여부, 페이지 상태값, 임시로 들고갈 데이터
• 객체/배열 같은 구조 데이터를 붙여야 할 때
• 화면 렌더링과 무관한 “JS 상태관리” 느낌일 때

✅ attr() 추천 상황

• href, src, title, disabled, checked 같은 실제 속성 제어
• HTML에 값이 남아야 하는 경우(디버깅/SSR/템플릿)
• data-*를 DOM에서 직접 읽어야 하는 경우

---

6) (추가) 바닐라 JS의 dataset은 뭐가 다를까?

data-* attribute를 “표준 방식”으로 다루고 싶으면 dataset도 많이 씁니다.

 

const el = document.querySelector('#box');

 

el.dataset.count = "3";

 

console.log(el.dataset.count); // "3" (문자열)

• dataset도 결국 attribute 기반이라 문자열입니다.
• 타입 유지가 필요하면 직접 변환이 필요합니다.

const count = Number(el.dataset.count);

---

✅ 결론 한 줄 정리

• data() = jQuery 내부 상태 저장(자료형 유지, 캐시 주의)
• attr() = HTML 속성 제어(무조건 문자열, DOM에 남음)