🌿 Vue 컴포넌트 간 통신 - Props와 Emit 완전정복

🌿 Vue 컴포넌트 간 통신 - Props와 Emit 완전정복

Vue 기초 시리즈 > 2️⃣ 컴포넌트 기반 개발 > 2️⃣ Props와 Emit을 통한 부모-자식 통신

• 1. 컴포넌트 통신이란?
• 2. Props: 부모 → 자식으로 데이터 전달
• 3. Emit: 자식 → 부모로 이벤트 전달
• 4. 실무 팁 & 주의사항
• 🔚 다음 글 안내

---

1. 컴포넌트 통신이란?

Vue는 컴포넌트 기반 구조입니다. 화면을 작은 단위로 나누면서 각각이 독립적으로 동작하지만, 부모/자식 간의 데이터 흐름이 필요합니다.

2. Props - 부모 → 자식 데이터 전달

props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.

// 부모 컴포넌트
<ChildComponent :title="pageTitle" />

// 자식 컴포넌트
props: {
  title: {
    type: String,
    required: true
  }
}

주의: props는 읽기 전용입니다. 자식 컴포넌트 안에서 직접 수정하면 안 됩니다.

// ❌ 안되는 예시
this.title = '변경 시도'; // 경고 발생

변경이 필요하면 emit 이벤트를 사용해 부모에 요청하세요.

3. Emit - 자식 → 부모 이벤트 전달

자식 컴포넌트가 부모에게 어떤 동작을 알려야 할 경우 this.$emit을 사용합니다.

// 자식 컴포넌트
<button @click="notifyParent">확인</button>

methods: {
  notifyParent() {
    this.$emit('confirm', '확인되었습니다!');
  }
}

// 부모 컴포넌트
<ChildComponent @confirm="handleConfirm" />

methods: {
  handleConfirm(message) {
    alert(message);
  }
}

4. 실무 팁 & 주의사항

• Props로 전달할 수 있는 타입: String, Number, Boolean, Object, Array 등
• Emit은 이름이 중요: 부모와 자식이 동일한 이벤트명을 써야 합니다
• 이벤트 이름은 kebab-case 권장: HTML 속성 스타일과 통일되므로 가독성이 좋습니다
• Props 변경이 필요한 경우: 자식 → 부모 emit 후, 부모에서 props 값을 변경해야 합니다
• v-model + emit: 자식 컴포넌트에서 양방향 바인딩을 위해 modelValue + update:modelValue 구조를 사용합니다

🔚 다음 글 안내

컴포넌트 간 통신이 이해되셨다면 이제 더 큰 범위의 상태 공유를 배워볼 차례입니다.

👉 다음 글: 컴포넌트 간 상태 공유 방법 (Provide/Inject)