[Javascript/자바스크립트] jQuery에서 .data로 가져오는 것과 .attr로 가져오는 것의 차이

작업하다가 웃긴 점을 발견해서 기록해두려 한다. 바로 "data-이름" 이런식으로 특정 element에 커스텀 데이터를 넣고 조회할 때 변경이 있으면 .data함수로 조회하는 건 변경을 감지하지 못하고 .attr("data-이름") 이런 식으로 조회해야지만 변경이 적용된 값을 조회할 수 있다.

코드샌드박스에 예제를 작성해놓았다. 이런식으로 진행해보면 이상하다는 점을 알 수 있다.

첫번째 방법

data를 조회하는 버튼과 attr을 조회하는 버튼을 눌러보자. 아래와 같이 둘 다 3이 뜰 것이다.

그리고 data-index를 attr을 통해 1로 바꾸는 버튼을 눌러본 뒤에 다시 아래 두 개의 버튼을 눌러보자.

띠용이다. 특정 element를 .data로 조회하는 함수는 그대로 3을 출력하고 있고 attr로 조회하는 함수만 값이 변하였다. 

실제 태그 속성을 확인해도 1로 변경돼있는 걸 확인할 수 있다. 하지만 .data로 조회하면 여전히 변경하기 전 값인 3이 뜬다.

두번째 방법

두번째 방법은 data-index속성을 먼저 1로 변경한 뒤에 .data를 조회하는 것이다. 그러면 뭐가 뜰까?

바로 1이 뜬다. 근데 이 상황에서 .attr함수가 아닌 .data로 data속성을 바꾼다면? attr이 아니라 data로 바꿔보는 버튼을 누른 뒤에 값을 확인해보도록 하자.

이번엔 .attr의 값은 그대로 있되 .data로 조회한 값만 변한 걸 확인할 수 있다. 내부 속성값을 확인해보면

띠용. 여전히 내부 실제값은 1이지만 5가 조회되는 걸 확인할 수 있다.

이를 통해 jQuery에서 .data함수가 어떻게 작동하는지 유추할 수 있다.

1. .data함수는 맨 처음 조회할 때 해당 태그에 저장된 실제 속성값을 특정 메모리에 작성한다.

2. 이부분은 .attr함수를 통해 실제 속성값을 변경하더라도 변경되지 않는다.

3. .data함수로 저장한 부분을 attr함수가 아닌 .data함수로 변경하고 싶으면 $('선택자').data('이름', '값'); 이런식으로 변경할 수 있으나 실제 속성값은 변하지 않고 1에서 말했던 특정 메모리 값이 변한다.

4. 그런 고로 .data로 조회하는 커스텀 데이터 값과 .attr로 조회하는 커스텀 데이터 값에 괴리가 발생할 수 있으니 제대로 알고 쓰자.

끗.