vue: 반응형 기초(reactivity)

vue reactivity 반응형 with chatGPT

 

Vue3의 반응형(Reactivity) 시스템은 컴포넌트 상태가 변경될 때마다 UI를 자동으로 업데이트하여, 동적인 사용자 인터페이스를 쉽게 구현할 수 있도록 돕습니다. 반응형 시스템의 기초는 ref, reactive, computed, 그리고 watch와같은 API를 사용하는 것입니다.

 

1.ref

ref는 원시 데이터 타입(문자열, 숫자, 블리언 등)을 반응형으로 만드는데 사용합니다. ref를 사용하면 값이 바뀔 때 Vue가 자동으로 UI를 업데이트 합니다. ref로 정의된 변수의 값을 읽거나 쓸 때는 .value를 통해 접근합니다.

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

const count = 0;

function increment(){
	count.value++;
}
</script>

<template>
	<div>
    	<p>카운트: {{ count }}</p>
        <button @click="increment">증가</button>
    </div>
</template>

★ Vue SFC Playground 코드 실행 →

이 코드에서 count는 반응형 변수로 설정되었고 count.value의 값이 변경될 때마다 UI가 자동으로 업데이트됩니다.

 

2.rective

reactive는 객체나 배열과 같은 복잡한 데이터를 반응형으로 만듭니다. ref와 는 달리 reactive로 생성한 객체의 프로퍼트는 .value없이 바로 접근할 수 있습니다.

<script setup>
import { reactive } from 'vue';

const person = reactive({
  name: "Alice",
  age: 25
});

function increaseAge() {
  person.age++;
}
</script>

<template>
  <div>
    <p>이름: {{ person.name }}</p>
    <p>나이: {{ person.age }}</p>
    <button @click="increaseAge">나이 증가</button>
  </div>
</template>

★ Vue SFC Playground 코드 실행 →

여기서 person.age가 변경되면 Vue가 이를 감지하여 UI를 자동으로 업데이트합니다.

 

3.computed

computed는 다른 반응형 데이터에 의존하는 계산된 속성입니다. 종속된 반응형 데이터가 변경될 때마다 새 값을 다시 계산하므로, 불필요한 연산을 줄일 수 있습니다.

<script setup>
import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

const totalPrice = computed(() => price.value * quantity.value);
</script>

<template>
<div>
	<p>가격: {{ price }}</p>
    <p>수량: {{ quantity }}</p>
    <p>총 가격: {{ totalPrice }}</p>
</div>
</template>

★ Vue SFC Playground 코드 실행 →

여기서 price나 quantity가 변경되면 totalPrice가 자동으로 다시 계산되고, UI도 업데이트됩니다.

 

4. watch

watch는 반응형 데이터나 계산된 속성의 변화를 감지하고 특정 작업을 수행하고 싶을 때 사용합니다. 비동기 작업이나 데이터가 변경될 때 수행해야 할 로직에 적합합니다.

 

<script setup>
import { ref, watch } from 'vue';

const name = ref("Alice");
const nameTxt = ref("");

watch(name, (newName, oldName) => {	
  nameTxt.value = `이름이 "${oldName}"에서 "${newName}"으로 변경되었습니다.`;
});
</script>

<template>
	<input v-model="name" placeholder="이름을 입력하세요"/>
  <p>{{ nameTxt }}</p>
</template>

★ Vue SFC Playground 코드 실행 →

여기서 name값이 변경될 때마다 watch에서 정의한 콜백이 실행됩니다.

 

5. watchEffect

watchEffect는 반응형 데이터를 의존성으로 사용하여, 그 데이터가 변경될 때마다 즉시 실행됩니다. Vue가 의존성을 자동으로 추적하므로 특정 데이터를 명시할 필요가 없습니다.

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);
const countNum = ref("0");

watchEffect(() => {
  countNum.value = `count 값: ${count.value}`
});
</script>

<template>
  <button @click="count++">증가</button>
  <p>{{ countNum }}</p>
</template>

★ Vue SFC Playground 코드 실행 →

여기서 count의 값이 바뀔 때마다 watchEffect 내의 코드가 실행됩니다.

 

요약

• ref: 원시 데이터 타입을 반응형으로 만드는데 사용.
• reactive: 객체와 배열을 반응형으로 만듦.
• computed: 계산된 속성으로, 종속된 데이터가 변경될 때 자동으로 재계산.
• watch: 특정 반응형 데이터가 변경될 때 실행할 코드를 정의.
• watchEffect: 의존성을 자동으로 추적하여 데이터 변경 시 코드 실행.

이렇게 Vue의 반응형 시스템을 사용하면, 코드가 더 직관적이고 동적으로 UI를 업데이트할 수 있어 개발이 훨씬 쉬워집니다.