Vue - Provide / Inject

Vue의 Provide와 Inject는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전역적으로 전달할 때 사용하는 API입니다. 부모-자식 관계에서 직접적인 props 전달 대신, 중첩된 컴포넌트 구조에서 멀리 떨어진 컴포넌트 간에도 데이터를 공유할 수 있습니다. 즉, 트리 구조에서 부모와 자식 사이에 많은 컴포넌트가 있더라도 데이터를 효율적으로 전달할 수 있게 해줍니다.

• provide: 상위 컴포넌트에서 데이터를 제공하는 역할을 합니다.
• inject: 하위 컴포넌트에서 상위 컴포넌트가 제공한 데이터를 주입받습니다.

props는 인접한 컴포넌트 간 데이터 전달만 가능하기 때문에 깊은 트리 구조에서 props가 전달되려먼 provide/inject 기능이 꼭 필요해 보입니다.

상위 컴포넌트

<!-- Provider.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    // provide로 제공할 데이터
    const message = "Hello from Parent!";
    
    // provide로 하위 컴포넌트에게 데이터 전달
    provide('sharedMessage', message);

    return {};
  }
};
</script>

하위 컴포넌트

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>Injected Message: {{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    // inject로 상위 컴포넌트에서 제공한 데이터 가져오기
    const injectedMessage = inject('sharedMessage');

    return {
      injectedMessage
    };
  }
};
</script>

provide에 데이터 이름, 데이터를 전달하면 하위 컴포넌트에서 inject(데이터 이름)으로 호출하여 해당 값을 불러올 수 있는 구조입니다.

Vue의 provide와 inject는 컴포넌트 계층 구조를 기반으로 동작합니다. 즉, provide로 제공된 값은 그 컴포넌트의 하위에 있는 컴포넌트들에서만 inject로 주입받을 수 있습니다.

객체나 함수 제공하기

Vue의 provide와 inject는 단순한 값뿐만 아니라 객체나 함수를 제공할 수 있습니다.
함수 전달의 예시를 살펴보겠습니다.

상위 컴포넌트

<!-- Provider.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const increment = (num) => num + 1;

    provide('increment', increment);

    return {};
  }
};
</script>

하위 컴포넌트

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>Incremented Number: {{ increment(5) }}</p>
  </div>
</template>

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

export default {
  setup() {
    const increment = inject('increment');

    return {
      increment
    };
  }
};
</script>

함수/데이터 간 사용 방식의 차이는 없습니다.