Vue.js의 Provide/Inject란?
Vue.js에서 **Provide/Inject**는 컴포넌트 간 데이터를 효율적으로 공유하기 위한 기능입니다. 일반적으로 부모-자식 컴포넌트 간 데이터 전달은 props와 emit을 사용하지만, 컴포넌트 계층이 깊어질 경우 관리가 어렵습니다. 이때 Provide/Inject를 사용하면 중간 컴포넌트를 거치지 않고 데이터를 직접 전달할 수 있습니다.
1. Provide로 데이터 제공
부모 컴포넌트에서 데이터를 제공할 때 provide 옵션을 사용합니다.
const app = Vue.createApp({
provide() {
return {
message: '이 데이터는 모든 하위 컴포넌트에서 접근할 수 있습니다!'
};
},
template: `
2. Inject로 데이터 사용
자식 컴포넌트에서는 inject를 사용하여 부모가 제공한 데이터를 사용할 수 있습니다.
app.component('child-component', {
inject: ['message'],
template: `부모 컴포넌트로부터 받은 메시지: {{ message }}
`
});3. Provide/Inject로 반응형 데이터 공유
Provide/Inject를 사용할 때 ref()를 활용하면 반응형 데이터도 공유할 수 있습니다.
const app = Vue.createApp({
setup() {
const count = Vue.ref(0);
Vue.provide('count', count);
return { count };
},
template: `
자식 컴포넌트에서는 다음과 같이 inject로 값을 받아 사용할 수 있습니다.
app.component('child-component', {
setup() {
const count = Vue.inject('count');
return { count };
},
template: `현재 카운트: {{ count }}
`
});마무리
이번 글에서는 Vue.js의 **Provide/Inject 기능을 활용한 상태 관리** 방법을 살펴보았습니다.
- Provide로 부모에서 데이터를 제공
- Inject를 통해 자식에서 데이터 사용
- 반응형 데이터를 Provide/Inject로 공유
다음 글에서는 **Vuex와 Pinia를 이용한 글로벌 상태 관리**를 다룰 예정입니다. 많은 기대 부탁드립니다! 😊