Vue의 Component 통신 방식 - 2. Event Emit

Vue.js Event Emit: 자식에서 부모로의 컴포넌트 통신

Vue.js에서 컴포넌트 간 통신의 두 번째 방법인 Event Emit에 대해 알아보겠습니다. Props가 부모에서 자식으로 데이터를 전달하는 방식이라면, Event Emit은 자식에서 부모로 신호를 보내는 방식입니다.

Event Emit이란?

Event Emit은 자식 컴포넌트가 부모 컴포넌트에게 이벤트를 발생시켜 통신하는 방법입니다.

특징

• 방향: 자식 컴포넌트 → 부모 컴포넌트
• 용도: 버튼 클릭, 입력값 변경 등의 사용자 액션 알림
• 방식: $emit() 메서드를 사용해 이벤트 발생

실제 코드 예제

<!-- HTML -->
<div id="app">
    <app-contents v-on:refresh="showAlert"></app-contents>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    var appContents = {
        template: `
        <p>
            <button v-on:click="sendEvent">갱신</button>
        </p>
        `,
        methods: {
            sendEvent() {
                this.$emit('refresh');
            }
        }
    }

    // 루트 컴포넌트
    Vue.createApp({
        components: {
            'app-contents': appContents
        },
        methods: {
            showAlert() {
                alert('새로고침 알림');
            }
        }
    }).mount('#app');
</script>

3계층 구조 분석

이 코드는 3개의 계층으로 구성되어 있습니다:

1️⃣ 최상단: Vue.createApp (#app)

Vue.createApp({
    components: {
        'app-contents': appContents  // 자식 컴포넌트 등록
    },
    methods: {
        showAlert() {
            alert('새로고침 알림');
        }
    }
}).mount('#app');

• 역할: 루트 컴포넌트 (최상위 부모)
• 책임: 전체 앱 관리, 자식 컴포넌트 등록, 이벤트 처리

2️⃣ 중간층: app-contents (컴포넌트 등록명)

<app-contents v-on:refresh="showAlert"></app-contents>

• 역할: 템플릿에서 사용하는 컴포넌트 이름
• 책임: 실제 appContents 객체를 HTML에서 참조하는 식별자

3️⃣ 하단층: appContents (실제 컴포넌트 객체)

var appContents = {
    template: `
    <p>
        <button v-on:click="sendEvent">갱신</button>
    </p>
    `,
    methods: {
        sendEvent() {
            this.$emit('refresh');
        }
    }
}

• 역할: 실제 컴포넌트 로직과 템플릿 정의
• 책임: 버튼 렌더링, 클릭 이벤트 처리, 부모에게 이벤트 전달

Event Emit 과정 상세 분석

단계별 실행 과정

1. 초기 렌더링

   • 부모 컴포넌트가 자식 컴포넌트 <app-contents>를 렌더링
   • v-on:refresh="showAlert": 자식에서 refresh 이벤트가 발생하면 showAlert 함수 실행

2. 자식 컴포넌트 렌더링

   • 자식 컴포넌트가 "갱신" 버튼을 화면에 표시
   • 버튼에 v-on:click="sendEvent" 이벤트 리스너 등록

3. 사용자 버튼 클릭

   사용자가 "갱신" 버튼 클릭
            ↓
   v-on:click="sendEvent" 실행

4. 자식에서 이벤트 발생

   sendEvent() {
       this.$emit('refresh');  // 부모에게 'refresh' 이벤트 전달
   }

5. 부모에서 이벤트 수신

   <app-contents v-on:refresh="showAlert"></app-contents>

6. 알림 표시

   showAlert() {
       alert('새로고침 알림');
   }

전체 통신 흐름도

사용자 버튼 클릭
         ↓
sendEvent() 실행
         ↓
this.$emit('refresh') 발생
         ↓
부모의 v-on:refresh 감지
         ↓
showAlert() 실행
         ↓
alert('새로고침 알림') 표시

Props와 Event Emit의 조합

이제 Props와 Event Emit을 함께 사용하면 완전한 양방향 컴포넌트 통신이 가능합니다:

1. Props: 부모 → 자식 데이터 전달
2. Event Emit: 자식 → 부모 이벤트 전달
3. 결과: 단방향 데이터 흐름을 유지하면서도 상호작용 가능

마무리

Event Emit은 Vue.js의 단방향 데이터 흐름을 유지하면서도 자식 컴포넌트가 부모에게 신호를 보낼 수 있게 해주는 핵심 메커니즘입니다. 3계층 구조를 이해하고 적절한 변수명을 사용하면 더욱 명확하고 유지보수하기 쉬운 컴포넌트를 만들 수 있습니다.

---

참고: 이 예제는 Vue 3의 CDN 버전을 사용했습니다. 실제 프로젝트에서는 Vue CLI나 Vite를 사용하는 것을 권장합니다.