Provide & Inject 해부: 의존성 주입

핵심 개념

provide()는 하위 컴포넌트 트리 전체에 데이터를 제공합니다. inject()는 상위에서 제공된 데이터를 주입받습니다. props drilling 없이 깊은 컴포넌트 통신이 가능합니다.

코드 분석

VUE📋 코드 (34줄)



const{createApp,ref,provide,inject}=Vue;
const Child={
  setup(){
    const theme=inject('theme','default');
    const systemName=inject('systemName','UNKNOWN');
    return{theme,systemName};
  },
  template:`<div style='padding:8px;border:1px solid #333;font-size:11px;'>
    <div style='color:#f59e0b;'>CHILD COMPONENT</div>
    <div style='color:#888;'>System: {{systemName}}</div>
    <div :style='{color:theme==="danger"?"#10b981":theme==="warning"?"#f59e0b":"#22c55e"}'>Theme: {{theme}}</div>
  </div>`
};
createApp({
  components:{Child},
  setup(){
    const theme=ref('safe');
    const systemName='CYBERDYNE v2.0';
    provide('theme',theme);
    provide('systemName',systemName);
    return{theme};
  },
  template:`<div>
    <div style='margin-bottom:8px;font-size:11px;color:#888;'>PARENT — provide 중</div>
    <div style='display:flex;gap:6px;margin-bottom:12px;'>
      <button @click='theme="safe"' style='background:#22c55e;color:#080808;border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>SAFE</button>
      <button @click='theme="warning"' style='background:#f59e0b;color:#080808;border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>WARNING</button>
      <button @click='theme="danger"' style='background:#10b981;color:#080808;border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>DANGER</button>
    </div>
    <child/>
  </div>`
}).mount('#pi-out');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'Provide & Inject' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Provide & Inject'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'Provide & Inject' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'Provide & Inject'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

Provide & Inject 해부: 의존성 주입은 이 3가지만 확실히 잡으세요

1.5단계 깊이로 props를 전달하면 중간 컴포넌트가 자신과 무관한 데이터를 계속 넘겨야 합니다

2.provide로 상위에서 데이터를 등록하면, inject로 어느 깊이의 자식에서든 직접 가져올 수 있습니다

3.다음 챕터에서 반복되는 상태 로직을 함수로 추출하는 Composable 패턴을 배웁니다

💬 이 챕터 질문 보기

VUE · CH.15 — 질문하거나 답변을 확인하세요

→

진행도 15 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)