[Vue3] Provide/ Inject

Props로 데이터를 하위컴포넌트에 전달할 때, 하위 Component -> 하위 Component .... 등 전달해야하는 end 컴포넌트까지의 루트가 복잡해지면 props전달이 반복되는 비효율적인 데이터 전달을 prop 드릴링이라고 합니다. vuex, pinia 등의 상태관리 라이브러리를 사용하여 해결 할 수도 있지만, 특정 범위내에서만 유효한 데이터 전송 루트가 필요할 경우 Provide(데이터 제공)/ Inject(데이터 주입)을 이용할 수 있습니다.

// 제공 컴포넌트
<script setup>
import { provide, ref } from 'vue'

const location = ref('북극')

function updateLocation() {
  location.value = '남극'
}

// 첫번째 인자 : 키워드, 두번째 인자 : 제공할 변수 및 함수
provide('location', { // 데이터 제공 provide 정의
  location,
  updateLocation
})
</script>

// 주입 컴포넌트
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location') // inject 데이터 주입
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

 

또한 컴포넌트의 트리가 깊고 넓을 때, 다수의 개발자가 참여한 대규모 앱 개발 시에는 일반적인 provide 키워드 사용으로 인한 충돌 가능성이 있습니다. 이때 Symbol()을 사용하여 충돌을 방지할 수 있습니다. 

// 키워드의 잠재적 충돌을 피하기 위한 Symbol사용
// keys.js
export const myInjectionKey = Symbol();

// 제공 컴포넌트
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'
provide('myInjectionKey', { // 데이터 제공 provide 정의
  location,
  updateLocation
})
</script>

// 주입 컴포넌트 
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const { location, updateLocation } = inject(myInjectionKey)

 

참고사이트
https://v3-docs.vuejs-korea.org/guide/components/provide-inject.html#working-with-reactivity