[VUE] Composition API - provide, inject

Composition API에서 provide와 inject는 부모 컴포넌트에서 데이터를 제공(provide)하고, 하위 컴포넌트에서 이를 주입(inject)받아 사용할 수 있도록 하는 기능입니다.

 

📌provide와 inject의 핵심 개념

• provide(key, value): 부모 컴포넌트에서 데이터를 제공
• inject(key, default value(없이도 사용 가능) ): 자식 컴포넌트에서 데이터를 주입받아 사용
• 깊은 컴포넌트 트리에서도 데이터를 쉽게 전달 가능 (props를 여러 단계 거칠 필요 없음)

 

 

📌provide, inject 기본 사용 방법

✅ 부모 컴포넌트에서 데이터 제공 (provide)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue'
    import childComponent from './childComponent.vue'

    const message = ref('parent message')
    
    // provide로 자식 컴포넌트에 데이터를 제공
    provide('requestMessage', message)
    
</script>

 

 

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>receive message : {{ requestMessage }}</p>
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const requestMessage = inject('requestMessage')
    
</script>

 

 

✅ 결과(parentComponent.vue)

부모 컴포넌트의 requstMessage를 받아와 자식 컴포넌트 내 Received message 영역에서 'parent message' 를 출력합니다.

 

 

📌반응형 데이터 전달 (provide + reactive or ref)

provide는 반응형 상태를 그대로 전달할 수 있습니다.

 

✅ 부모 컴포넌트에서 데이터 제공 (provide + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    // provide로 자식 컴포넌트에 데이터를 제공
    provide('count', count);

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

 

 

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const count = inject('count')
</script>

 

 

✅ 결과(parentComponent.vue)

부모 컴포넌트의 증가 버튼을 눌러 count가 증가하면 자식 컴포넌트에도 즉시 반영됩니다.

 

 

📌inject 기본값 설정

만약 부모에서 provide하지 않았다면 inject 시 undefined가 될 수 있습니다.
이때 기본값을 설정할 수 있습니다.

 

✅ 부모 컴포넌트에서 데이터 미제공 (provide + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    // provide로 자식 컴포넌트에 데이터를 미제공
    // provide('count', count);

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

 

 

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
</template>

<script setup>
    import { inject } from 'vue';

    // inject로 부모 컴포넌트의 데이터를 주입
    const count = inject('count', 123) // default value로 123을 설정
</script>

 

 

✅ 결과(parentComponent.vue)

부모 컴포넌트에서 provide를 제공하지 않아 자식 컴포넌트에서 설정한 디폴트 값인 123 이 출력됩니다.

 

 

📌provide 함수 전달

단순한 값뿐만 아니라 함수도 provide를 통해 전달할 수 있습니다.

 

✅ 부모 컴포넌트에서 데이터 제공 (provide + ref)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue';
    import childComponent from './childComponent.vue';

    const count = ref(0);

    
    provide('count', count); // provide로 자식 컴포넌트에 데이터를 제공
    provide('increment', increment) // provide로 자식 컴포넌트에 함수 제공

    // count를 증가시키는 함수
    function increment() {
        count.value++;
    }
</script>

 

 

✅ 자식 컴포넌트에서 데이터 주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    <p>count from parent : {{ count }}</p> 
    <button @click="increment">증가(부모 함수)</button>
</template>

<script setup>
    import { inject } from 'vue';

    const count = inject('count'); // inject로 부모 컴포넌트의 데이터를 주입
    const increment = inject('increment'); // inject로 부모 컴포넌트의 함수 주입
</script>

 

 

✅ 결과(parentComponent.vue)

자식 컴포넌트에서도 부모가 제공한 increment() 함수를 실행하여 count를 변경할 수 있습니다.

 

 

 

📌provide, inject 글로벌 상태 관리

Composition API에서 provide와 inject를 사용하면 간단한 글로벌 상태 관리가 가능합니다.
부모 → 자식→ 손자 컴포넌트로 전달이 가능합니다.

 

✅ 부모 컴포넌트에서 데이터 제공 (provide)

<!-- parentComponent.vue -->
<template>
    <h2>parentComponent</h2>
    <childComponent />
</template>

<script setup>
    import { provide, ref } from 'vue'
    import childComponent from './childComponent.vue'

    const message = ref('parent message')
    
    // provide로 자식 컴포넌트에 데이터를 제공
    provide('requestMessage', message)
    
</script>

 

 

✅ 자식 컴포넌트에서 데이터 미주입 (inject)

<!-- childComponent.vue -->
<template>
    <h2>childComponent</h2>
    
    <!-- 손자 컴포넌트 -->
    <grandChildComponent />
</template>

<script setup>
    import grandChildComponent from './grandChildComponent.vue';
</script>

 

 

✅ 손자 컴포넌트에서 데이터 주입 (inject)

<!-- grandChildComponent.vue -->
<template>
    <h2>grandChildComponent</h2>
    <p>receive message : {{ requestMessage }}</p>
</template>

<script setup>
    import { inject } from 'vue';

    // 부모 컴포넌트에서 provide된 데이터를 자식 컴포넌트에서 사용하지 않고 손자 컴포넌트에서 inject
    const requestMessage = inject('requestMessage');
    
</script>

 

 

✅ 결과(parentComponent.vue)

부모 컴포넌트에서 제공한 데이터를 자식 컴포넌트에서 inject 하지 않고 손자 컴포넌트에서 사용할 수 있습니다.

 

 

📌정리

기능	설명
provide(key, value)	부모 컴포넌트에서 데이터 제공
inject(key, defaultValue?)	자식 컴포넌트에서 데이터 주입
반응형 데이터 전달	ref 또는 reactive로 선언한 데이터를 전달 가능
함수 제공	provide로 함수를 전달하여 자식에서 실행 가능
기본값 설정	inject에서 기본값을 설정할 수 있음