[Vue.js] Vue 반응형 (Reactivity Fundamentals)

반응형 (Reactivity Fundamentals)

Vue.js에서 "반응형"은 Vue 컴포넌트의 데이터와 화면 간의 관계를 설명하는 중요한 개념입니다.

Vue.js의 핵심 동작 원리로서 데이터의 변경이 화면에 자동으로 반영되도록 합니다.

 

 

# 반응형 상태 설정 (Declaring Reactive State)

ref()

<script setup>
  import { ref } from 'vue'

  const count = ref(0)  //리액트에서 count의 값은 0이라고 지정하는 것과 같음 
  //리액트와 달리 값을 변경하는 함수가 따로 필요하지 않음 

  //count가 객체이고 그 중 value properties
    console.log(count) // { value: 0 }
    console.log(count.value) // 0

    count.value++
    console.log(count.value) // 1
</script>

<template>
  <div class="layout">
    <h1>This is an Template page</h1>
    <button @click="count++">증가</button>
    <div>{{ count }}</div> 
  </div>
</template>

 

 

# 메서드 선언 (Declaring Methods)

컴포넌트에 메서드를 추가하기 위해 methods 옵션을 사용. 

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 생명 주기 훅 또는 다른 메서드에서 호출 가능
    this.increment()
  }
}

Vue는 메서드에서 this로 컴포넌트 인스턴스를 참조할 수 있음.

(ES6의 문법 arrow fuction은 this를 컴포넌트 인스턴스로 바인딩하는 것을 막아, 메서드 선언 시, 사용하지 않음)

<button @click="increment">{{ count }}</button>
<!-- 템플릿 내에서 이벤트 리스너로 사용 가능 -->

 

 

# DOM 업데이트 타이밍 (DOM Update Timing)

상태 변경 시, DOM이 자동으로 업데이트됩니다. Vue의 컴포넌트가 한 번만 업데이트되도록 합니다.

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // 업데이트된 DOM에 접근 가능
      })
    }
  }
}