[Vue.js] Immediate Watch를 이용한

🏴1. 구현 의도

구현하려는 화면

실제 구현된 화면

test.vue

<template>
    <div class="test">
        <div class="content">
        	<!-- "1. 테스트카메라" 가 출력되어야 함 -->
            <p>{{ `${cam.cameraSeq}. ${cam.cameraName}` }}</p>
        </div>
    </div>
</template>

export default {
    props: {
        info : {
            type: Object,
        },
    },
    data() {
        return {
            cam: { 
                cameraSeq: '',
                cameraName: ''
            }
        }
    },
    watch: {  
        info: {
            handler(newVal) {
                this.cam = newVal;
            },
        }
    }
};
</script>

 

Vue.js에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 저는 test.vue에서 부모로부터 props를 이용해서 info 데이터를 받았습니다. 그리고 info를 cam에 바인딩해서 카메라정보를 화면에 뿌려주려고 하는데요. 실제 구현을 해보니 부모컴포넌트에서 바뀐 info가 자식컴포넌트에 제대로 전달이 되지 않고 있었습니다.  왜 일까요?

 

🚨 2. 문제점 

왜냐하면 Vue.js에서 컴포넌트의 watch 옵션이 기본적으로는 컴포넌트가 생성된 후에 해당 데이터의 변경을 감지하기 시작하기 때문입니다. 즉, 컴포넌트가 초기화될 때 props의 초기 값에 대해서는 감지하지 않고, 오직 값이 변경될 때만 감지합니다. 이런 이유로, 컴포넌트가 마운트되고 props에 이미 초기 값이 할당된 상태에서는, 이 초기 값의 할당을 watch가 감지하지 못합니다.

 

💡3. 해결방법

컴포넌트가 처음 마운트될 때, props로 받은 초기 값은, watch에서 "변화"로 간주되지 않습니다. 따라서, 이 초기 상태에 대한 반응을 설정하고자 할 때는 watch의 immediate 옵션을 활용해야 합니다.

Immediate Watch는 watch 속성의 옵션 중 하나입니다. 일반적으로 watch는 지정된 데이터나 props의 값이 "변경"될 때만 함수를 실행합니다. 그러나 immediate: true 옵션을 사용하면 컴포넌트가 생성될 때, 데이터나 props에 대해 설정된 함수를 "즉시" 실행할 수 있습니다. 요 장점을 살리면 아래와 같은 처리를 쉽게 할 수 있습니다.

 

Immediate Watch 

1.초기값 처리: 컴포넌트가 마운트될 때 초기 상태를 처리합니다.
· 예시: 위 코드에서 cam을 빈값으로 해두어도 Immediate를 사용하면 컴포넌트가 생성될 때 cam의 초기값을 "즉시" 처리할 수 있습니다.  cam : {}  → cam = { cameraSeq: 1, cameraName: '테스트카메라'} 

2. 설정 변경 반응: 컴포넌트의 생명주기와 관계없이 언제든지 발생할 수 있는 변경사항에 대해 "즉시" 반응하도록 설정할 수 있습니다. 이를테면  화면테마나 설정언어들을 애플리케이션이 로드될 때 설정해줘야하는데, 이런 초기 설정을 적용하는 데 사용할 수 있습니다. 

3. 데이터 초기화: 컴포넌트의 데이터를 외부 API 호출 결과나 props에 기반해서 초기화해야하는 경우, Immediate watch를 사용하면 컴포넌트가 로드될 때 데이터를 "즉시" 처리할 수 있습니다. 위 코드에서처럼 info값을 props로 받아오자마자 즉시  cam에 바인딩 해줘야하는 경우 사용할 수 있습니다.

 

Immediate 옵션을 사용하면, watch는 컴포넌트가 생성되고 나서 "즉시" 해당 데이터를 감시합니다.🧐 또한, 컴포넌트가 마운트될 때 "즉시" props의 초기값을 감지하고 처리하기 때문에, cam의 초기 상태를 빈 객체로 설정할 수도 있습니다.

export default {
    props: {
        info : {
            type: Object,
        },
    },
    data() {
        return {
            cam: { }	// 초기에 빈 객체로 선언해도 OKEY!
        }
    },
    watch: {  
        info: {
			immediate: true,
            handler(newVal) {
                this.cam = newVal;	// 컴포넌트 마운트 시 즉시 실행되어, newVal로 초기화
            },
        }
    }
};
</script>

 

짜잔, 요렇게 하면 잘 나온다!

구현하려는 화면