provide / inject는 부모 컴포넌트에서 데이터를 제공하고, 하위 컴포넌트(자식, 손자 등)에서 이를 주입 받아 사용하는 의존성 주입 패턴입니다.
여러 단계의 컴포넌트 간에 props를 일일이 전달하지 않고도 데이터를 공유할 수 있게 해줍니다.
1️⃣ 기본 개념
- provide: 상위(부모) 컴포넌트에서 하위 컴포넌트들이 사용할 데이터를 등록합니다.
- inject: 하위(자식 또는 더 깊은) 컴포넌트에서 상위 컴포넌트가 제공한 데이터를 받아 사용합니다.
장점:
- 깊게 중첩된 컴포넌트에 props를 일일이 전달할 필요가 없음
- 전역 상태 관리(Vuex, Pinia)를 사용하기 전 간단한 데이터 공유 방법으로 유용
2️⃣ <script setup> 문법을 사용한 예제
2.1 부모 컴포넌트 (Provider)
<!-- ParentComponent.vue -->
<template>
<div>
<h2>부모 컴포넌트</h2>
<!-- 자식 컴포넌트 렌더링 -->
<ChildComponent />
</div>
</template>
<script setup>
import { ref, provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
// 공유할 데이터 생성 (reactive)
const message = ref('부모로부터 전달된 메시지')
// provide로 데이터를 등록 (키: 'message')
provide('message', message)
</script>
설명:
ref()를 사용해 반응형 데이터 생성provide('message', message)를 통해 하위 컴포넌트에서 'message' 키로 해당 데이터를 주입받을 수 있음
2.2 자식 컴포넌트 (Injector)
<!-- ChildComponent.vue -->
<template>
<div>
<h3>자식 컴포넌트</h3>
<p>Injected Message: {{ message }}</p>
</div>
</template>
<script setup>
import { inject } from 'vue'
// inject로 부모가 제공한 데이터를 받아옴 (키: 'message')
const message = inject('message')
// 만약 주입된 값이 없을 경우, 기본값 설정도 가능
// const message = inject('message', ref('기본 메시지'))
</script>
설명:
inject('message')를 사용해 부모에서 제공한message값을 가져옴- 기본값을 설정할 수도 있어, 부모 컴포넌트가 provide하지 않을 경우에도 동작할 수 있음
3️⃣ 주요 포인트
- 데이터 공유 범위:
provide로 등록한 데이터는 부모 컴포넌트의 모든 하위 컴포넌트(자식, 손자 등)에서inject를 통해 접근할 수 있습니다.
- 반응성 유지:
ref()또는reactive()로 생성된 반응형 데이터를provide하면, 하위 컴포넌트에서도 데이터 변경에 반응하여 업데이트됩니다.
- 기본값 사용:
inject함수의 두 번째 인자를 통해 기본값을 설정할 수 있습니다.const message = inject('message', ref('기본 메시지')) - 주의 사항:
- 단방향 데이터 흐름: provide/inject는 상위 → 하위 데이터 전달이므로, 하위 컴포넌트에서 값을 직접 변경하는 것은 권장하지 않습니다.
- 코드 관리: 깊게 중첩된 컴포넌트에서만 필요한 데이터 공유 방식으로 사용하는 것이 좋습니다. 전체 상태 관리를 위해서는 Pinia나 Vuex 같은 상태 관리 도구를 사용하는 것이 좋습니다.
📌 정리
- provide: 부모 컴포넌트에서 데이터를 등록
- inject: 하위 컴포넌트에서 데이터를 받아 사용
- 문법을 사용하면 코드가 간결해지고, 상위-하위 간의 데이터 공유가 명확해집니다.
