HTML에서 data- 로 시작하는 태그는 jQuery에서 .data() 함수로 가져올 수 있다.
예를 들어 data-idx 태그라면 $(this).data("idx") 이런 식으로 해당 태그를 선택할 수 있다.
속성값을 가져오는 .attr() 함수로도 비슷한 기능을 수행할 수 있다.
예를 들어 data-idx 태그를 가져오려면 $(this).attr("data-idx") 이렇게도 가져올 수 있다.
근데 이 data 함수로 값을 가져와 주는 쪽에서 오류가 나서..
검색해 보니 attr 함수와 data 함수에는 차이가 있기 때문에 사용에 조심해야 한다고 한다!!
문제가 된 로직은 이것이다.
1. 기본 상태에는 data-idx에 값이 들어 있지 않음
<button type="button" id="btn" data-idx="">btn</button>
2. 이 버튼에 jQuery attr 함수로 data-idx값을 넣어 줌
$("#btn").attr("data-idx", 1)
3. 같은 페이지에서 data 함수로 이 버튼의 data-idx값을 가져와서 사용함
var idx = $("#btn").data("idx")
4. 같은 버튼에 data 함수로 data-idx에 2를 넣어 줌
$("#btn").data("idx", 2)
5. attr 함수로 버튼의 data-idx값을 가져옴
$("#btn").attr("data-idx")→ 2가 찍힐 거라고 예상했는데 1이 찍힌다…
개발자 도구에서 확인한 HTML 태그의 data-idx도 2로 갱신되지 않았다.
테스트해본 결과 data로 넣은 값은 data로 가져오고, attr로 넣은 값은 attr로 가져와야 한다는 걸 알게 됐다..
data()로 넣은 값은 HTML 태그에 적용되지 않고 별도의 메모리에 저장되는 듯하다. (받아오는 건 잘 되는데..)
반면 attr()로 넣은 값은 HTML 태그에 잘 적용된다.
그래서 data-idx 태그에 값이 들어 있지 않은 상태에서 $("#btn").data("idx",2) 를 해줘도
개발자 도구에서 HTML을 확인해 보면 data-idx에 값이 들어가지 않는다.
근데 console.log($("#btn").data("idx"))를 하면 또 2가 찍힌다. 별도의 메모리에 저장됐기 때문..!!
아무래도 HTML에 찍히는게 디버깅이나 여러모로 편할 듯해서 나는 이부분은 다 attr()로 사용하도록 수정했다.
data 함수와 attr 함수의 기능은 유사하지만 이를 섞어서 쓰는 일이 없어야 할 듯하다.
댓글