[Vue.js] Refs의 역할과 사용법

<template>
  <div>
    <input type="text" ref="inputField" placeholder="이름을 입력하세요" />
    <button @click="showInputValue">입력한 이름 보기</button>
  </div>
</template>

<script>
export default {
  methods: {
    showInputValue() {
      // ref를 사용하여 입력된 값을 가져옵니다.
      const inputValue = this.$refs.inputField.value;
      alert(`입력한 이름은 ${inputValue}입니다.`);
    }
  }
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Refs는 Vue.js에서 DOM 요소나 자식 컴포넌트에 접근하기 위한 방법 중 하나입니다. Refs를 사용하면 특정 DOM 요소에 직접 접근하여 값을 가져오거나 조작할 수 있습니다.

위의 예제는 Refs를 사용하여 입력된 값을 가져와서 알림창으로 표시하는 간단한 예제입니다. <input> 요소에 ref="inputField"를 설정하여 Refs를 만들었습니다. 그리고 버튼을 클릭하면 showInputValue 메소드가 호출되어 Refs를 사용하여 입력된 값을 가져온 후, 알림창에 표시합니다.

Refs를 사용하면 Vue 컴포넌트 내에서 DOM 요소에 쉽게 접근할 수 있으며, 이를 통해 다양한 기능을 구현할 수 있습니다. 하지만 너무 남발하면 컴포넌트의 가독성이 떨어질 수 있으므로, 필요한 경우에만 적절히 사용하는 것이 좋습니다.