태그 자신의 :속성 값을 확인하는 방법은

Vue 템플릿 내에서 이벤트 핸들러 함수 안에서 해당 태그 자신의 :속성 값을 확인하는 방법은 몇 가지가 있습니다.
1. event.currentTarget 사용 (가장 직접적인 방법):
JavaScript의 네이티브 이벤트 객체인 event에는 currentTarget이라는 속성이 있습니다. 이것은 이벤트 리스너가 실제로 부착된 요소를 참조합니다. 이 요소를 통해 해당 태그의 속성에 접근할 수 있습니다.
<template>
  <div :my-attribute="myValue" @click="handleClick">
    클릭하세요
  </div>
</template>

<script>
export default {
  data() {
    return {
      myValue: '초기값'
    };
  },
  methods: {
    handleClick(event) {
      // event.currentTarget을 통해 해당 div 요소에 접근
      const myAttributeValue = event.currentTarget.getAttribute('my-attribute');
      console.log('my-attribute 값:', myAttributeValue);

      // DOM 속성으로 직접 접근할 수도 있습니다.
      // const myAttributeValueDirect = event.currentTarget.myAttribute; // kebab-case는 직접 접근 안됨
      // console.log('직접 접근:', myAttributeValueDirect); // undefined
    }
  }
};
</script>

설명:
* event.currentTarget: 클릭 이벤트가 발생한 div 요소를 가리킵니다.
* getAttribute('my-attribute'): HTML 요소의 getAttribute 메서드를 사용하여 my-attribute라는 이름의 속성 값을 가져옵니다. Vue의 :속성은 최종적으로 HTML 속성으로 렌더링되기 때문에 이 방법이 유효합니다.
주의: Vue의 :속성은 데이터 바인딩을 통해 내부적으로 처리되므로, JavaScript에서 직접 DOM의 myAttribute와 같이 카멜케이스(camelCase)로 접근하는 것은 일반적으로 작동하지 않습니다. 항상 getAttribute('kebab-case')를 사용해야 합니다.
2. $event와 함께 직접 속성을 전달 (권장하지 않음, 하지만 가능은 함):
이 방법은 코드가 복잡해질 수 있어 일반적으로 권장되지 않지만, 해당 속성 값을 직접 이벤트 핸들러로 전달하는 것도 가능합니다.
<template>
  <div :my-attribute="myValue" @click="handleClick($event, myValue)">
    클릭하세요
  </div>
</template>

<script>
export default {
  data() {
    return {
      myValue: '초기값'
    };
  },
  methods: {
    handleClick(event, attributeValue) {
      console.log('my-attribute 값 (직접 전달):', attributeValue);
    }
  }
};
</script>

설명:
* @click="handleClick($event, myValue)": 클릭 이벤트 발생 시 handleClick 함수를 호출하면서 $event (네이티브 이벤트 객체)와 myValue (해당 태그의 my-attribute에 바인딩된 데이터)를 인자로 전달합니다.
* 이 방법은 myValue가 변경될 때마다 이벤트 핸들러에 올바른 값이 전달되지만, 만약 여러 개의 속성을 확인해야 한다면 인자가 많아져 코드가 복잡해질 수 있습니다. 또한, 속성 자체가 아니라 그 속성에 바인딩된 데이터를 전달하는 것이므로, myValue가 아닌 다른 방식으로 바인딩된 복잡한 속성에는 적용하기 어렵습니다.
3. ref를 사용하여 요소에 접근 (복잡한 경우):
만약 해당 태그에 더 많은 조작이 필요하거나, 여러 속성을 확인해야 하는 등 복잡한 시나리오라면 ref를 사용하여 해당 요소 자체에 접근하는 방법을 고려할 수 있습니다.
<template>
  <div ref="myDiv" :my-attribute="myValue" @click="handleClick">
    클릭하세요
  </div>
</template>

<script>
export default {
  data() {
    return {
      myValue: '초기값'
    };
  },
  methods: {
    handleClick() {
      // ref를 통해 요소에 접근
      const myDivElement = this.$refs.myDiv;
      if (myDivElement) {
        const myAttributeValue = myDivElement.getAttribute('my-attribute');
        console.log('my-attribute 값 (ref 사용):', myAttributeValue);
      }
    }
  }
};
</script>

설명:
* ref="myDiv": div 태그에 myDiv라는 ref를 부여합니다.
* this.$refs.myDiv: 컴포넌트 인스턴스 내에서 this.$refs.myDiv를 통해 해당 DOM 요소에 접근할 수 있습니다.
* 이후 getAttribute를 사용하여 속성 값을 가져옵니다.
어떤 방법을 선택해야 할까요?
* 가장 간단하고 직접적인 방법: event.currentTarget.getAttribute('속성명')을 사용하는 것이 일반적인 경우에 가장 적합합니다.
* 속성 자체가 아니라 바인딩된 데이터 값을 확인하려는 경우: handleClick($event, myValue)와 같이 직접 인자로 전달하는 것도 고려할 수 있습니다. 하지만 이는 해당 데이터가 이미 컴포넌트의 data에 정의되어 있을 때 더 유용합니다.
* 요소에 대한 더 복잡한 DOM 조작이나 여러 속성 접근이 필요한 경우: ref를 사용하는 것이 좋습니다.
대부분의 경우, event.currentTarget.getAttribute('속성명')을 사용하는 것이 가장 직관적이고 Vue의 철학에 부합하는 방법입니다.