싱글 파일 컴포넌트(SFC)의 props & event emit

개요

Vue 3의 Single File Component(SFC)에서 부모-자식 컴포넌트 간의 데이터 통신은 props와 emit을 통해 이루어집니다. 이번 포스트에서는 실제 예제를 통해 이 두 개념을 자세히 살펴보겠습니다.

Props: 부모에서 자식으로 데이터 전달

Props란?

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 자식 컴포넌트는 props를 통해 받은 데이터를 읽기 전용으로 사용할 수 있습니다.

예제 코드 분석

부모 컴포넌트 (App.vue)

<template>
  <AppHeader :appTitle="message" @change="changeMessage"/>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  components: {
    "AppHeader": AppHeader
  },
  data() {
    return {
      message: "앱 헤더 컴포넌트"
    }
  },
  methods: {
    changeMessage() {
      this.message = "앱 헤더 컴포넌트 변경"
    }
  }
}
</script>

자식 컴포넌트 (AppHeader.vue)

<template>
    <h1>{{ appTitle }}</h1>
    <button @click="changeTitle">타이틀 변경</button>
</template>

<script>
export default {
    props: ['appTitle'],
    methods: {
        changeTitle() {
            this.$emit("change");
        }
    }
}
</script>

Props 사용법

1. 부모에서 props 전달: :appTitle="message" 형태로 v-bind를 사용
2. 자식에서 props 정의: props: ['appTitle'] 배열 형태로 정의
3. 템플릿에서 사용: {{ appTitle }} 형태로 직접 사용

Emit: 자식에서 부모로 이벤트 전달

Emit이란?

Emit은 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 방법입니다. 자식 컴포넌트가 부모 컴포넌트에게 "무언가가 일어났다"고 알릴 때 사용합니다.

예제 코드 분석

자식 컴포넌트에서 emit 사용

methods: {
    changeTitle() {
        this.$emit("change");
    }
}

부모 컴포넌트에서 이벤트 수신

<template>
  <AppHeader :appTitle="message" @change="changeMessage"/>
</template>

Emit 사용법

1. 자식에서 이벤트 발생: this.$emit("이벤트명") 형태로 사용
2. 부모에서 이벤트 수신: @change="changeMessage" 형태로 v-on 사용
3. 데이터와 함께 전달: this.$emit("change", data) 형태로 데이터도 함께 전달 가능

실제 동작 흐름

1. 초기 상태: 부모 컴포넌트의 message가 "앱 헤더 컴포넌트"로 설정
2. Props 전달: 부모에서 자식으로 appTitle prop을 통해 메시지 전달
3. 사용자 액션: 자식 컴포넌트의 "타이틀 변경" 버튼 클릭
4. 이벤트 발생: 자식에서 change 이벤트를 emit
5. 부모 반응: 부모의 changeMessage 메서드가 실행되어 message를 "앱 헤더 컴포넌트 변경"으로 업데이트
6. UI 업데이트: 변경된 메시지가 다시 자식 컴포넌트로 전달되어 화면에 반영

Props와 Emit의 장점

Props의 장점

• 단방향 데이터 흐름: 데이터의 흐름이 명확하고 예측 가능
• 컴포넌트 재사용성: 같은 컴포넌트를 다른 데이터로 재사용 가능
• 테스트 용이성: props를 통해 전달되는 데이터를 쉽게 테스트 가능

Emit의 장점

• 느슨한 결합: 부모와 자식 컴포넌트가 느슨하게 결합
• 이벤트 기반 통신: 명확한 이벤트 기반 통신으로 코드 가독성 향상
• 확장성: 여러 자식 컴포넌트에서 같은 이벤트를 발생시킬 수 있음

주의사항

1. Props는 읽기 전용: 자식 컴포넌트에서 props를 직접 수정하면 안 됩니다
2. 이벤트명 규칙: emit 이벤트명은 camelCase나 kebab-case를 일관되게 사용
3. Props 검증: 복잡한 애플리케이션에서는 props에 타입과 기본값을 정의하는 것이 좋습니다

결론

Vue 3 SFC에서 props와 emit은 부모-자식 컴포넌트 간의 데이터 통신을 위한 핵심 개념입니다. props를 통해 데이터를 전달하고, emit을 통해 이벤트를 발생시키는 패턴을 잘 이해하면 재사용 가능하고 유지보수가 쉬운 컴포넌트를 만들 수 있습니다.

이러한 단방향 데이터 흐름은 Vue의 반응성 시스템과 잘 어울려서, 데이터 변경 시 자동으로 UI가 업데이트되는 반응형 애플리케이션을 구축할 수 있게 해줍니다.

다음 포스트에서는 간단한 토이프로젝트를 통해 지금까지 배웠던 개념을 복습하는 시간을 가져보겠습니다 :)