[Vuejs] props 바인딩 watch, watchEffect

 

vuejs 3버전에서는 기존의 vuejs에서 제공한 것과 마찬가지로 "상위 > 하위" 컴포넌트로 프로퍼티를 전달할 수 있습니다.

아래는 일반적으로 프로퍼티를 전달하는 모습의 샘플코드 입니다.

* 부모 컴포넌트.vue

<script setup lang="ts">
import ChildElement from '어디에서가져온.vue'
import { ref} from 'vue'
const data = ref(false); //논리값을...
</script>
<template>
    <ChildElement :data="data"></ChildElement>  <!-- ChildElement 컴포넌트에 전달 -->
</template>

 

 

이렇게 전달된 프로퍼티는 자식 컴포넌트에서는 defineProps 함수를 통해서 바인딩하여 쓸 수 있습니다.

* 자식 컴포넌트.vue

<script setup lang="ts">
const { data } = defineProps(['data'])  //부모로부터 받은 데이터
</script>
<template>
    {{data}}
</template>

 

 

사실 여기까지는 문제되는 것이 없는 코드 입니다.

그런데 해당 데이터를 감시(구독)하는 기능을 붙일 때 문제가 발생 합니다.

* 자식 컴포넌트.vue

<script setup lang="ts">
import { watchEffect } from 'vue'
const { data } = defineProps(['data'])  //부모로부터 받은 데이터
watchEffect(() => {
  console.log('data : ',data)
})
</script>
<template>
    {{data}}
</template>

 

 

위 코드는 "data" 의 내용이 바뀌면 감시(watch) 하여 콘솔에 출력해주는 코드 입니다.

실제로 부모 컴포넌트나 자식 컴포넌트에서 data 값을 바꾸 더라도 watchEffect 의 함수의 내용은 실행되지 않습니다.

마찬가지로 watch 함수에 deep 속성 true를 준다 하더라도 동작하지 않습니다.

 

개발 콘솔도구를 실행하여보면 아래와 같은 경고(warn) 문구를 볼 수 있습니다.

아핫~

 

단순한 데이터에 대해서는 감시(watch) 하는 함수가 동작하지 않는 것 입니다.

그러므로 부모에게 받은 프로퍼티(properties)의 데이터 변화를 감시하려면 객체형식을 전달하는 것이 좋습니다.

* 변경된 부모.vue

<script setup lang="ts">
import ChildElement from '어디에서가져온.vue'
import { ref, reactive } from 'vue'
//const data = ref(false); //이렇게 주지 말고..
const data = reactive({"data":false, "blabla":111}); //이렇게 전달합시다..
</script>
<template>
    <ChildElement :data="data"></ChildElement>  <!-- ChildElement 컴포넌트에 전달 -->
</template>

 

자식 노드에서 감시하는 함수가 동작하지 않는다?

부모가 전달한 데이터가 단순한지 가장 먼저 확인하시면 되겠습니다!