Vue 메서드

V-model

v-model은 Vue.js에서 가장 많이 사용되는 디렉티브 중 하나로, 폼(form) 요소에서 양방향 데이터 바인딩(two-way data binding)을 구현할 때 사용됩니다.
예를 들어, input 요소에서 사용자가 입력한 값을 자동으로 Vue.js 데이터에 바인딩하여, 데이터를 업데이트하면 해당 값이 자동으로 반영되는 것입니다.

<template>
  <div>
    <input type="text" v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

React에서는 useState와 onChage를 연달아 이어서 표현하였는데, 제어컴포넌트라서 한 컴포넌트에서 렌더링이 되지만
Vue에서는 해당 자료를 관리하는 Watch 안에서만 렌더링이 되었다

script 안에 렌더링이라고 작성하였고,
watch 안에 렌더링을 확인할 수 있게 작성하였다.

2글자를 지우고 감자라는 글씨 입력하니 렌더링이 되었다.
해당 watch만 렌더링 되는 것이 깔끔했다.

@click

@click은 Vue.js에서 이벤트 핸들러를 등록하는 방법 중 하나입니다. @ 기호는 v-on:의 축약형으로 사용되며, 특정 이벤트가 발생할 때 실행될 함수를 등록합니다.

onclick과 다르게 작성한다

ref

ref는 Vue.js에서 사용되는 기능 중 하나입니다. ref는 DOM 엘리먼트나 컴포넌트의 인스턴스에 이름표를 붙이는 방법입니다. 이 이름표를 통해 해당 DOM 엘리먼트나 컴포넌트를 참조할 수 있습니다.

Vue.js 컴포넌트는 JavaScript 객체입니다. 그래서 DOM 엘리먼트를 직접 조작할 수 없습니다. 이때 ref를 사용하면 DOM 엘리먼트에 접근할 수 있습니다. ref는 this.$refs 객체를 사용하여 참조할 수 있습니다.

예를 들어, 다음과 같이 ref를 사용하여 입력 필드의 값을 가져올 수 있습니다.

<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      const inputValue = this.$refs.myInput.value;
      alert(inputValue);
    },
  },
};
</script>

위의 코드에서 ref는 myInput으로 설정되었습니다. 이제 handleClick 메소드에서 $refs 객체를 사용하여 myInput 필드의 값을 가져올 수 있습니다.

대부분의 데이터들을 ref로 바인딩을 하는 것 같은데 좀 더 탐구가 필요하다.

onMounted

Vue.js의 lifecycle hook 중 하나로, 컴포넌트가 DOM에 추가되면 실행되는 함수입니다. DOM을 조작하거나 API 요청을 하는 등 초기화 작업을 수행할 때 사용됩니다. 이 함수를 사용하려면 setup() 함수 안에서 import { onMounted } from 'vue' 를 통해 import 한 후, 다음과 같은 형태로 사용합니다.

import { onMounted } from 'vue';

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  }
}

useEffect 2번째 인자를 []로 준 느낌이다.

computed

Vue.js에서는 데이터의 변화를 감지하여 자동으로 UI를 업데이트하는데, 이를 위해 computed 속성을 사용합니다. computed 속성은 다른 데이터 속성을 계산하여 반환하는 함수로, 반환된 값은 일반적인 데이터 속성처럼 사용할 수 있습니다. 이 함수를 사용하려면 setup() 함수 안에서 import { computed } from 'vue' 를 통해 import 한 후, 다음과 같은 형태로 사용합니다.

import { ref, computed } from 'vue';

const count = ref(0);

const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 0

count.value = 2;
console.log(doubleCount.value); // 4

데이터 입력을 해주면 전처리해주는 느낌이다. 아직은 좀 더 알아봐야할 것 같다.

watch

watch: Vue.js에서 데이터의 변화를 감지하여 특정 로직을 수행하고자 할 때 사용됩니다. watch 함수는 감시할 데이터와 데이터가 변경되었을 때 수행될 콜백 함수를 인자로 받습니다. 이 함수를 사용하려면 setup() 함수 안에서 import { watch } from 'vue' 를 통해 import 한 후, 다음과 같은 형태로 사용합니다.

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newCount, oldCount) => {
  console.log(`count is updated: ${oldCount} -> ${newCount}`);
});

count.value = 1; // "count is updated: 0 -> 1"

watch 함수는 두 번째 인자로 옵션 객체를 받아 세부적인 동작을 조정할 수 있습니다. deep 옵션은 객체 또는 배열의 중첩 구조에서 변경 사항을 감지할 때 사용되며, immediate 옵션은 감시를 시작하면서 콜백 함수를 즉시 한 번 실행할 지 여부를 결정합니다. 또한 watchEffect 함수를 사용하면 특정 데이터 속성을 감시하는 대신, 해당 데이터에 의존하는 모든 로직을 감시할 수 있습니다.