[Vue.js] 컴포넌트 심화4 - Provide/Inject

앞에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다는 것을 공부했다. 그런데 만약 컴포넌트 계층 구조가 복잡하게 얽혀 있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면 props를 통해서 데이터를 전달하는 것은 굉장히 복잡한 코드를 양산하게 된다.

이런 경우에 사용할 수 있는 것이 Provide/Inject이다. 컴포넌트의 계층 구조가 아무리 복잡하더라도 부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있다.

위 그림에서 제일 위가 ParentComponent, 가운데가 ChildComponent1, 2 제일 아래가 ChildChildComponent1, 2, 3이라고 했을 떄 props를 사용해서 ChildChildComponent1로 데이터를 전달하려면 ParentComponent -> ChildComponent1 -> ChildChildComponent1 이렇게 3단계를 거쳐서 전달해야 하지만 provide/Inject를 사용하면 한 번에 바로 전달할 수 있다.

ProvideInject.vue

<template>
    <ProvideInjectChild />
</template>
<script>
import ProvideInjectChild from './ProvideInjectChild';
export default{ 
    components:{ProvideInjectChild},
    data(){
        return{
            items: ['A', 'B']
        };
    },
    provide(){
        return {
            itemLength: this.items.length
        };
    }
}
</script>

Provide 함수를 통해서 배열 items의 length를 반환한다.(자식 컴포넌트로 전달하고자 하는 데이터를 provide에 정의한다.)

ProvideInjectChild.vue

<template>
    <div></div>
</template>
<script>
export default{ 
    inject: ['itemLength'],
    mounted() {
        console.log(this.itemLength);
    }
}
</script>

부모 컴포넌트로부터 전달받고자 하는 데이터와 동일한 속성 이름으로 inject에 문자열 배열로 정의한다.

이렇게 Provider/Inject를 이용하면 아무리 컴포넌트 계층 구조가 복잡하더라도 원하는 자식 컴포넌트로 데이터를 한 번에 전달할 수 있다.

하지만, Inject를 통해서 데이터를 전달받는 자식 컴포넌트에서 전달받는 데이터가 어느 부모 컴포넌트로부터 전달되는지 확인이 안된다는 단점이 있다.