JavaScript에서 HTML 요소에 대한 데이터를 저장하는 방법

바닐라 DOM 조작으로 작업했다면 아마도 요소와 관련된 데이터를 저장해야 하는 상황에 처했을 것입니다. 이 작업을 수행하는 방법을 살펴보겠습니다.

처음으로 다음과 같이 요소 개체 자체에 데이터를 저장하는 아이디어를 생각해 냈을 것입니다.

const setElementData = (el, data) => {
  el.$dataKey = data;
}

const getElementData = (el) => {
  return el.$dataKey;
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

이 방법이 효과가 있더라도 좋지 않습니다. 요소 개체에 사용자 지정 소품을 추가하는 것은 권장되지 않으며 올바르게 수행되지 않으면 메모리 누수가 발생할 수 있습니다.

그렇다면 올바른 방법은 무엇입니까?

올바른 방법은 WeakMap를 사용하여 요소에 대한 데이터를 저장하는 것입니다. 코드는 다음과 같을 것입니다

const elementDataMap = new WeakMap();

const setElementData = (el, data) => {
  elementDataMap.set(el, data);
}

const getElementData = (el) => {
  return elementDataMap.get(el);
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

이렇게 하면 메모리 누수를 일으키지 않고 요소에 대한 데이터를 저장할 수 있습니다. WeakMap가 무엇인지 모른다면, check out the MDN docs .

안녕!