[Vue.js] provide와 inject 사용 방법

[등장 배경]

provide와 inject는 부모 컴포넌트와 자식 컴포넌트 간 데이터를 전달할 때 사용합니다.

하지만 우리는 이미 이러한 관계에서 데이터를 전달하는 방법을 알고 있습니다...

[Vue.js] 부모 컴포넌트 ↔ 자식 컴포넌트 데이터 전달

바로 props와 emit을 사용하면 되는데요.

 

굳이 굳이 privode와 inject를 써야 할까요?

props와 emit은 직접적인 부모-자식 관계에 적합한데, 관계가 중첩될수록 각 단계마다 데이터를 전달해야 하므로 비효율적입니다.

출처: https://ko.vuejs.org/guide/components/provide-inject.html#prop-drilling

여러 단계의 중첩된 자식 컴포넌트들이 있고 가장 상위의 부모 컴포넌트에서 가장 하위의 자식 컴포넌트까지 데이터를 전달해야 할 때, 각 단계마다 그 데이터를 props로 전달해야 하는 것을 Prop Drilling이라고 합니다.

 

이런 비효율적인 상황을 해결하기 위해 provide와 inject가 등장하게 된 것입니다!

출처: https://ko.vuejs.org/guide/components/provide-inject.html#prop-drilling

[provide]

provide는 말 그대로 제공하는 역할을 합니다. 데이터를 전달할 부모 컴포넌트에서 사용되는데 전달된 데이터는 해당 컴포넌트의 모든 하위 컴포넌트에서 접근 가능합니다.

export default {
  provide() {
    return {
      message: 'Hello from parent'
    }
  }
}

[inject]

inject는 말 그대로 주입하는 역할을 합니다. 자식 컴포넌트에서 사용되며, 부모 컴포넌트로부터 제공받은 데이터를 주입받습니다.

export default {  
  inject: ['message']
}

[활용 예시]

// ParentComponent.vue
<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  
  provide() {
    return {
      message: 'Hello from parent'
    }
  }
}
</script>

ParentComponent에서 provide를 통해 message라는 데이터를 제공합니다.

// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {  
  inject: ['message']
}
</script>

ChildComponent에서는 inject를 통해 ParentComponent에서 제공하는 message를 사용할 수 있습니다.

 

즉, 부모 컴포넌트에서 'Hello from parent'라는 데이터를 provide(제공)하고, 자식 컴포넌트에서 해당 데이터를 inject(주입)하여 사용하는 구조입니다.

   Parent ('message' 제공)
       |
   Child ('message' 주입)