reactive로 선언한 반응형 객체 자체를 바꿨는데 watch ... - 인프런

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Watch, WatchEffect

reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요

작성

487

<template>
  <button @click="objChange">obj 바꾸기</button>
</template>

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

export default {
  setup() {
    const x = ref(0);

    let obj = reactive({
                count: 0,
		message: 'hi',
		object: { num: 0 },
		array: [1, 2, 3],
		ref: x,
	    });

    const objChange = () => {
		console.log(obj);
		obj = { a: 1 };
		console.log(obj);
	  };

    watch(obj, (newValue, oldValue) => {
	          console.log('newValue: ', newValue);
		  console.log('oldValue: ', oldValue);
    });

    return { x, obj, objChange };
  },
};
</script>

버튼을 눌러서 obj 값을 {a : 1} 로 바꾸면 왜 watch 콜백함수가 실행이 안되나요?

{a : 1}이 반응형 객체가 아니어도 처음에 바뀔때는 실행 될 거라고 생각했습니다

혹시나 해서 obj를 반응형 객체로 바꿔도 watch 콜백함수가 실행이 안되는데 왜 변화를 인지 못 하나요?

vue.js vuejs

답변 1

짐코딩

지식공유자

안녕하세요.

이유는 obj = { a: 1 }; 해당 코드에서 obj에 새로운 값이 할당 되었을 뿐 기존 반응형 상태에는 변화가 없기 때문입니다. 즉, obj(Reference Type)에 새로운 메모리 주소가 할당 됩니다.

기존 반응형 객체에 변화를 주기 위해서는 기존 객체에 obj.a = 1와 같이 기존 반응형 객체에 할당 해야 합니다.

참고

jjkim0222

질문자

"reactive 함수에 객체를 넣음으로써 반응형 상태를 선언할 수 있다"

let obj = reactive( { count : 0 })

1) 이러면 obj 객체 자체 { count : 0 } 는 반응형 상태가 아니고

obj.count만 반응형 상태인 건가요?

2) 그렇다면 객체 자체의 변화를 감지하고 싶다면 객체의 속성으로 객체를 넣는 방법밖에 없는 건가요?

outObj = reactive ( { inObj : { count : 0 } } )

짐코딩

지식공유자

안녕하세요. 반응형 상태를 떠나서

자바스크립트 참조타입(Reference Type)에 대한 이해가 필요할 것 같아요.

// obj1 이라는 변수를 선언 했습니다.
let obj1; 

// obj1에 객체를 할당 했습니다. 이때 obj1은 객체를 가리키고 있는 메모리 주소 "값"을 갖고 있습니다.
obj1 = { count: 0 }; 

// obj1이 갖고 있는 주소값을 obj2에도 할당 합니다.
// 그러면 obj1과 obj2는 같은 객체를 가리키고 있습니다. (즉, 같은 값을 갖음)
let obj2 = obj1;

// 이때 obj2에 다른 값을 할당합니다.
obj2 = { message: 'hello' };

// obj2 변수에 다른 값을 할당 했을 뿐
// 여전의 obj1 = { count: 0 }; 같을 갖고 있습니다.
// 즉, 객체 값(속성)의 변화가 없습니다.

이렇듯

let obj = reactive( { count : 0 })
obj = { m: 'hello' };
// 이러한 할당은 단순히 obj변수에 "새로운 객체"를 할당한 것입니다.

만약 객체 자체의 값의 변화를 감지하고 싶다면 ref함수로 선언하시면 될 것 같습니다.

jjkim0222

질문자

감사합니다! 완벽히 이해했습니다 ^^

인프런 커뮤니티 질문&답변

reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요