자식 컴포넌트는 부모에게 어떻게 통신하나요?

Question

Accepted Answer

자식은 **이벤트를 발생시켜** 부모에게 *위로* 통신합니다. 부모는 `@event-name`으로 이를 수신합니다. 이것이 Vue의 단방향 데이터 흐름을 완성합니다: **props는 아래로, events는 위로**. ## 자식에서 발생시키기 ```vue ``` ## 부모에서 수신하기 ```vue ``` 자식은 부모의 데이터를 직접 수정할 수 없으며(또한 그래서도 안 됩니다). 대신 페이로드와 함께 이벤트를 발생시켜 부모에게 작업을 *요청*합니다. 데이터를 소유한 부모가 변경을 수행합니다. ## defineEmits로 emits를 선언하는 이유 ```js const emit = defineEmits(["delete"]); // 컴포넌트의 API를 문서화 // 또는 검증 / TypeScript와 함께: const emit = defineEmits<{ delete: [id: number] }>(); ``` 발생시킬 이벤트를 선언하면 컴포넌트의 "출력"을 문서화하고, 페이로드의 타입 검사를 가능하게 하며, 이벤트가 실수로 네이티브 DOM 리스너로 취급되는 것을 방지합니다. ## 다른 통신 패턴 ```text props + emits → 부모 ↔ 직접 자식 (기본, 가장 흔함) provide/inject → prop drilling 없이 깊은 곳까지 데이터 전달 Pinia store → 관련 없는/멀리 떨어진 컴포넌트 간 공유 상태 v-model → 양방향 바인딩 (props + emit 설탕) ``` ## 왜 중요한가 이벤트 발생은 자식이 부모 상태에 영향을 주는 표준적이고 예측 가능한 방법입니다 — 단방향 데이터 흐름을 보존합니다(이는 앱을 추론하고 디버깅하기 쉽게 만듭니다). `defineEmits` + `@listener`를 알고, 부모-자식이 아닌 통신을 위해 언제 `provide/inject`나 Pinia로 넘어가야 하는지 아는 것이 Vue의 컴포넌트 통신 모델을 포괄합니다.