e.target.dataset과 jQuery의 .data()의 결과 값은 다를 수 있다.

 

e.target.dataset과 jQuery의 .data()의 결과 값이 다르다?

어떻게 된일인지 파악해보자.

 

 

환경정보

-jQuery : https://code.jquery.com/jquery-3.3.1.min.js

 

 

 

요구사항

data-lang 속성의 값이 'ko'인 타겟을 클릭하면 data-lang 값이 en으로 변경된다.

이 때 변경된 data-lang의 값을 타겟 재 클릭 시 가져오기

 

 

 

이슈사항

vue.js 를 사용하여 동적으로 리스트 생성했고, 동적으로 생성하는 타겟을 클릭 -> 동적으로 타겟의 값이 수정됨 -> 타겟을 재 클릭 시 결과 값이 e.target.dataset과 .data();의 값이 상이함.

 

e.target.dataset의 경우 내가 의도한대로 수정된 결과 값을 리턴한다.

하지만 $(e.target).data()의 경우 기존의 결과 값이 리턴되므로 오류를 생겼다. 

 

 

 

원인분석

jQuery에서 .data() 메서드를 파라미터 없이 호출하게 되면 캐싱(caching)기능이 작동하게 되어서 생기는 문제

(파라미터가 없음이 기준)

 

 

1.jQuery의 data()로직을 따라가다 보면 cache메서드 호출이 되고, 이 때 this.expando의 유니크한 키 값이 없을 경우 object에 저장한다.

 

2.그 후 data()가 같은 객체에서 호출이 되면 cache 메서드에서 유니크한 키 값을 찾게되고, 일치하는 값이 object에 있으면 저장된 값(캐싱된 값)을 가져온다.

 

따라서 e.target.dataset과 .data()의 값은 상이한 결과가 나오는게 맞다.

내 코드가 문제인 줄 알고 한참을 삽질했다.

 

dataset의 값은 lang:en으로 정상적으로 변경되었으나 value값은 기존에 캐싱된 ko가 나오는 것을 확인 할 수 있다.

 

이래서 메서드를 잘 알고 있어야 하는구나 싶었다..