jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자
- 프로그래밍/제이쿼리
- 2021. 12. 20.
jQuery에서 제공하는 data()는 DB(Database)와 같은 데이터 저장소 역할을 합니다. data()가 데이터 저장소와 같은 역할을 한다면 화면을 개발할 때 무슨 필요가 있냐고 생각할 수 있지만, 화면에서 특정 기능이 동작하기 데이터가 필요한 경우 매번 서버와 통신하는 것은 불필요합니다. 특히 불필요하게 서버와의 통신이 빈번하게 일어나면 서버에 과부하를 주는 요소가 되기 때문에 어느 정도의 데이터는 화면에서 관리하고 사용하는 게 화면을 개발할 때 편리합니다. 그럼 오늘은 jQuery의 data()에 대해 학습해보도록 하겠습니다.
data()는 어떤 원리로 동작하는 걸까?
jQuery의 data()는 앞서 이야기드렸듯이 데이터를 설정하는 기능입니다. 그런데 한 가지 의문스러운 부분은 DB도 아니면서 어떻게 데이터를 저장하느냐입니다. 브라우저의 내장 객체인 localStorage, sessionStorage에 데이터를 저장해놓는 구조인 걸까요? 아니면 쿠키(Cookie)를 이용하는 걸까요?
결론은 Object.defineProperty를 이용해서 내부에 cache 값을 정의한다 입니다. data()의 경우 localStorage나 sessionStorage와 같이 별도로 저장소(Storage)를 운영하는 방식이 아닙니다. 자바스크립트가 가지는 스코프를 이용해 외부에서는 접근할 수 없는 범위를 만들어 값을 설정합니다.
그리고 여기에는 재미있는 요소가 한 가지 더 있는데요. data()를 이용해 값을 설정하지 않아도 attribute의 이름이 "data-*"로 시작하면 data()를 이용해 값을 가져올 수 있다는 부분입니다. data-*는 사용자가 정의한 데이터 속성을 의미해요. 지금은 사용자 정의 데이터와 관련해서 HTML의 표준이 있지만, HTML과 자바스크립트가 지금처럼 발전하기 이전인 명확한 기준이 없던 시절에는 데이터로 저장되는 Element의 attribute는 회사마다 개발자마다 제각각이었어요.
setAttribute()를 이용해서 data-*를 사용하는 것과 별반 차이가 없다고 생각할 수 있지만 attribute를 이용해서 사용자 데이터를 정의해서 쓰게 되면 사용자의 중요한 정보를 누구나 볼 수 있다는 보안 이슈가 있어요. jQuery의 data()도 보안 문제에서 완전히 자유로울 수는 없지만 attribute를 사용할 때처럼 완전히 데이터를 노출시키지 않아요. 뿐만 아니라 data()는 JSON 형태의 데이터도 처리할 수 있어요.
data()를 사용하는 방법
data()는 key, value 형태로 사용할 수 있습니다. key에 일치하는 요소와 연결된 데이터를 저장하거나 일치하는 요소 집합의 첫 번째 요소 값을 반환합니다. 또한 data()를 사용하면 순환 참조나 메모리 누수 없이 편리하게 데이터를 DOM 요소에 저장할 수 있습니다.
const spanElement = document.createElement('span');
$(spanElement).data('messsage');
// undefined
$(spanElement).data();
// {}
$(spanElement).data('message', 'hello');
$(spanElement).data('messsage');
// 'hello'
$(spanElement).data();
// { messsage: 'hello' }간단하게 data()의 사용 방법을 정의하면 위와 같습니다. 조금 더 상세한 예제 코드를 통해 data()의 사용방법을 알아보겠습니다. data()는 removeData()와 함께 사용하면 필요에 따라 값을 저장하고 삭제도 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>data 예제</title>
<style>
input {
width: calc(100% - 10px);
margin: 5px;
display: block;
}
button {
margin: 5px;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<input id="text-input" type="text" data-test="Welcome" />
<button>data-test attribute 가져오기</button>
<button>messsage에 Hello 저장하기</button>
<button>messsage 지우기</button>
<script>
$('button').click(function () {
const input = $('#text-input');
var value;
switch ($('button').index(this)) {
case 0:
input.data('message', input.data('test'));
break;
case 1:
input.data('message', 'Hello');
break;
case 2:
input.removeData('message');
break;
}
input.val(input.data('message'));
});
</script>
</body>
</html>예제코드는 파일로도 첨부하였습니다. 필요하신 분이 있으시다면 첨부 파일을 다운로드하셔서 사용하시면 됩니다.
'프로그래밍 > 제이쿼리' 카테고리의 다른 글
| jQuery - 속성을 판별하는 hasAttr() 함수는 없다 (0) | 2023.06.19 |
|---|---|
| jQuery - click()이 동작하지 않으면 on()을 사용해보자 (1) | 2022.02.25 |
| jQuery - CDN을 이용해서 제이쿼리를 사용해볼까? (0) | 2022.02.13 |
| jQuery - $(document).ready() 대신 $()를 사용하자 (6) | 2021.05.13 |
| jQuery - 제이쿼리란? (5) | 2021.03.30 |