Props & Emits 해부: 컴포넌트 통신

핵심 개념

props는 부모에서 자식으로 데이터를 전달합니다. emits는 자식에서 부모로 이벤트를 발생시킵니다. props를 지우며 단방향 데이터 흐름이 어떻게 끊기는지 확인하십시오.

코드 분석

VUE📋 코드 (28줄)



const{createApp,ref}=Vue;
const UnitCard={
  props:{model:String,threat:Number},
  emits:['terminate'],
  template:`<div style='display:flex;justify-content:space-between;align-items:center;padding:8px;background:#111;margin-bottom:6px;font-size:11px;'>
    <span style='color:#f59e0b'>{{model}}</span>
    <span style='color:#888'>위협:{{threat}}</span>
    <button @click='$emit("terminate",model)' style='background:#10b981;color:#080808;border:none;padding:2px 8px;cursor:pointer;font-size:10px;'>TERMINATE</button>
  </div>`
};
createApp({
  components:{UnitCard},
  setup(){
    const units=ref([{model:'T-800',threat:8},{model:'T-1000',threat:10}]);
    const log=ref([]);
    const onTerminate=(model)=>{
      units.value=units.value.filter(u=>u.model!==model);
      log.value.unshift(model+' TERMINATED');
    };
    return{units,log,onTerminate};
  },
  template:`<div>
    <unit-card v-for='u in units' :key='u.model' :model='u.model' :threat='u.threat' @terminate='onTerminate'/>
    <div v-for='(l,i) in log' :key='i' style='font-size:10px;color:#10b981;margin-top:4px;'>{{l}}</div>
  </div>`
}).mount('#props-out');

AI 프롬프트

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

Claude

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

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

ChatGPT

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

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

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

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

⭐ 이것만 기억하세요

Props & Emits 해부: 컴포넌트 통신은 이 3가지만 확실히 잡으세요

1.컴포넌트 간 데이터를 전역 변수로 공유하면 의존성이 꼬이고, 어디서 값이 바뀌는지 추적이 불가능합니다

2.Props는 부모→자식 단방향 데이터 전달이고, Emits는 자식→부모 이벤트 전달입니다 — 단방향 흐름이 핵심입니다

3.다음 챕터에서 컴포넌트의 생성·업데이트·소멸 시점에 로직을 실행하는 Lifecycle Hooks를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 13 / 34

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