Vue3에서 provide/inject 사용하는 방법과 변화 포인트 정리

Vue에서는 컴포넌트 간 깊은 계층 구조 속에서 데이터를 전달할 때 props drilling 없이 데이터를 공유할 수 있도록 provide와 inject 기능을 제공합니다. Vue2에서도 존재했던 기능이지만, Vue3에서는 Composition API와 함께 사용법이 더 간결하고 명확하게 변화했습니다. 이번 포스팅에서는 provide와 inject의 차이점과 Vue3에서의 사용법을 정리해보겠습니다.

provide와 inject는 어떤 역할일까?

• provide: 부모 컴포넌트에서 데이터를 제공
• inject: 자식 컴포넌트에서 해당 데이터를 주입받음

특징

• props처럼 직접 전달하지 않아도 됨
• 주로 전역 설정값 또는 공통 의존성 객체를 공유할 때 사용

Vue2 방식의 사용법

Vue2에서는 provide와 inject를 옵션 형태로 사용했습니다.

// 부모 컴포넌트
export default {
  provide: {
    theme: 'dark'
  }
}

// 자식 컴포넌트
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme) // 'dark'
  }
}

• 이 방식은 간단하지만 정적인 데이터만 제공 가능했습니다.
• 반응형 데이터(reactive)를 제공하려면 추가적인 조작이 필요했어요.

Vue3에서는 어떻게 바뀌었을까?

Vue3에서는 Composition API 덕분에 provide / inject를 함수 형태로 사용할 수 있게 되었습니다. 또한 반응형 데이터도 자연스럽게 주입할 수 있습니다!

Composition API로 사용하는 예시

<!-- 부모 컴포넌트 -->
<script setup>
import { ref, provide } from 'vue'

const theme = ref('dark')
provide('theme', theme)
</script>

<!-- 자식 컴포넌트 -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')
console.log(theme.value) // 'dark'
</script>

특징

• provide(key, value) 형태로 선언
• inject(key)로 사용
• ref, reactive 등 반응형 객체도 주입 가능

inject에 기본값 지정하기

만약 inject 대상이 존재하지 않을 경우를 대비해 기본값을 지정할 수도 있어요.

const theme = inject('theme', ref('light'))
// 또는 함수형으로 동적으로도 지정 가능
const theme = inject('theme', () => ref('light'))

 

부모에서 값 변경 시 자식도 자동 반영?

Vue3에서는 ref나 reactive로 제공한 값은 자식에서도 반응형으로 연결되기 때문에 부모에서 값을 변경하면 자식에서도 자동 반영됩니다.

 

언제 사용하면 좋을까?

• 다수의 하위 컴포넌트가 공통 설정이나 객체를 사용할 때
• 예: 테마 설정, 폼 context, 사용자 정보, 전역 설정 등

단, 너무 자주 사용하면 컴포넌트 간의 결합도가 높아질 수 있으므로 명확한 구조 목적이 있을 때 사용하는 것이 좋아요.

정리하며

Vue3에서 provide와 inject는 Composition API 덕분에 더 간단하고 유연하게 사용할 수 있게 되었습니다. 특히 반응형 데이터의 주입이 가능해졌다는 점이 큰 변화입니다.

항목	Vue2	Vue3 Composition API
제공 방식	옵션 객체로 선언	provide(key, value) 함수로 선언
주입 방식	inject: ['key'] 옵션	inject('key') 함수로 선언
반응형 지원	별도 조작 필요	ref, reactive 바로 사용 가능
기본값 지정	불가 또는 수동 처리	함수나 두 번째 인자로 기본값 설정 가능

 

Vue3를 사용한다면 props, emits에 이어provide/inject도 Composition API 기반으로 전환해보세요. 더 깔끔하고 예측 가능한 코드 구조를 만들 수 있습니다.