반응형 상태 관리 ref reactive computed watch - Vue 기본기 다지기 4편

Reactive State Management ref reactive computed watch - Vue Basics Part 4

let a = 10;
let b = 20;
let c = a + b; // c는 30
 
a = 15; 
// a가 바뀌었지만 c는 여전히 30입니다.

<script setup>
import { ref } from 'vue'
 
// 0이라는 값을 가진 반응형 데이터 'count'를 생성합니다.
const count = ref(0)
 
function increment() {
  // 스크립트 안에서 값을 변경하거나 접근할 때는 .value를 사용해야 합니다.
  count.value++
}
</script>
 
<template>
  <button @click="increment">
    카운트: {{ count }}
  </button>
</template>

<script setup>
import { reactive } from 'vue'
 
// user 객체를 반응형으로 만듭니다.
const user = reactive({
  name: 'promleeblog',
  age: 10,
  hobbies: ['코딩', '독서']
})
 
function celebrateBirthday() {
  // .value 없이 속성에 직접 접근하여 수정합니다.
  user.age++
}
 
function addHobby() {
  user.hobbies.push('운동')
}
</script>
 
<template>
  <p>이름: {{ user.name }}</p>
  <p>나이: {{ user.age }}</p>
  <button @click="celebrateBirthday">생일 축하</button>
  <button @click="addHobby">취미 추가</button>
</template>

let state = reactive({ count: 0 })
 
// 이 코드는 state 객체의 count 속성을 바꾸므로 반응성이 유지됩니다.
state.count++
 
// 이 코드는 state 변수 자체를 새로운 객체로 교체해버립니다.
// 이 순간 기존에 연결된 반응성이 끊어집니다. (주의!)
state = reactive({ count: 1 }) 

<script setup>
import { ref, computed } from 'vue'
 
const firstName = ref('Promlee')
const lastName = ref('Blog')
 
// firstName이나 lastName이 바뀔 때만 fullName이 알아서 다시 계산됩니다.
const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})
</script>
 
<template>
  <p>성: <input v-model="firstName"></p>
  <p>이름: <input v-model="lastName"></p>
  <p>전체 이름: {{ fullName }}</p>
</template>

<script setup>
import { ref, watch } from 'vue'
 
const question = ref('')
const answer = ref('질문에는 보통 물음표가 포함됩니다.')
 
// question 데이터가 변경되는 것을 감시합니다.
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    answer.value = '생각 중...'
    // 실제로는 여기에 API 호출 로직이 들어갈 수 있습니다.
    await new Promise(resolve => setTimeout(resolve, 1000))
    answer.value = '네, watch는 매우 유용합니다.'
  }
})
</script>
 
<template>
  <p>
    <label>질문을 입력하세요:</label>
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</template>