[Vue.js] 변화하는 props 데이터 감지를 위한 watch 사용

vue를 사용하여 어떠한 list를 받아와서 props로 자식 컴포넌트에 데이터를 넘겨주어야하는데 list가 요청에 따라 달라질 때 마다 자식 컴포넌트가 리렌더링되게 하려고 computed 등의 방법을 써보았는데 잘 동작하지 않았다.

그래서 props 데이터를 watch로 변경을 감지하도록 했더니 잘 동작하는 것을 볼 수 있었다. 부모 컴포넌트에서 자식 컴포넌트로 동적props 세팅이 필요할때 유용할 것 같다.

* 샘플코드

• 부모 컴포넌트

<template>
	<child-component :value="list"></child-component>
    <button :click="change">바꾸기</button>
</template>
<script>

import ...

export default : {
	components : {
    	childComponent,
    },
    
    data : function() {
    	return {
        	list : null, 
        }
    },
	created () {
    	const vm = this;
        vm.list = [1,2,3];
    },
    
    method : {
    	function change() {
        	vm.list = [4,5,6]
        }
    },
}

</script>

• 자식 컴포넌트

<template>
	<div>text</div>
</template>

<script>
export default : {
	props: ['value'],
    data () {
    	return {
        	text : this.value,
        
        }
    },
    watch : {
		value() {
        	const vm = this;
        	console.log('변경 감지');
            vm.text = vm.value;
        }
    }
}


</script>