[Vue.js] Props와 Emits

Vue.js의 컴포넌트 시스템은 애플리케이션을 재사용 가능한 작은 단위로 나눌 수 있도록 도와줍니다.

이 과정에서 부모와 자식 컴포넌트 간의 데이터 전달과 이벤트 처리가 중요합니다.

Vue3의 <script setup> 문법을 기준으로 Props와 Emits에 대해서 설명하도록 하겠습니다.

 

1. Props ( 부모에서 자식으로 데이터 전달 ) 👨 👉 👦

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

자식 컴포넌트에서 어떤 데이터를 받을 것인지 명시적으로 정의해야합니다.

 

1-1. 부모 컴포넌트

<template>
  <div>
    <h1>부모 컴포넌트</h1>
    <ChildComponent :msg="message" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
const message = '안녕하세요. 저는 부모 컴포넌트에서 왔어요!'

</script>

 

1-2. 자식 컴포넌트

<template>
  <div>
    <h2>자식 컴포넌트</h2>
    <p>{{ msg }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
// 부모로부터 전달받을 props를 정의
const props = defineProps({
  msg: {
    type: String,
    required: true,
  },
})
</script>

 

 

결과

부모 컴포넌트의 메시지가 자식 컴포넌트로 전달되어 화면에 출력됩니다.

 

defineProps는 Vue3의 <script setup>문법에서 부모 컴포넌트로부터 전달받는 데이터를 선언하는 함수입니다. 컴포넌트의 Props를 명시적으로 정의하며, 이 컴포넌트에서 어떤 Props를 사용할지 알려주는 역할을 합니다. 그래서 props를 사용하기 위해선 위와 같이 defineProps를 명시적으로 적어주셔야 합니다.

 

msg  =>  props 이름입니다. 부모 컴포넌트가 데이터를 전달할 때 :msg="message"와 같이 사용하였으므로 자식 컴포넌트에서 사용할 때는 msg를 사용하면 됩니다.

 

type: String  =>  props의 데이터 타입을 지정합니다. 여기서 String은 msg가 문자열이어야 한다는 것을 의미합니다.

만약 type에 맞지 않는 데이터를 전달하면 개발 콘솔에 경고가 출력됩니다

 

required: true  => props가 필수적으로 전달되어야 함을 나타냅니다.

만약 부모 컴포넌트가 이 값을 전달하지 않으면 개발 콘솔에서 경고가 발생합니다.

 

 

2. Emits ( 자식에서 부모로 데이터 전달 ) 👦 👉 👨

Emits는 자식 컴포넌트가 특정 이벤트를 발생시켜 부모 컴포넌트가 이를 처리할 수 있도록 합니다.

자식 컴포넌트가 직접 부모 데이터를 수정하지 않고, 이벤트를 통해 데이터를 전달하는 방식입니다.

 

2-1. 부모 컴포넌트

<template>
  <div>
    <h1>부모 컴포넌트</h1>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleEvent = (data) => {
  alert(`자식 컴포넌트로부터 전달받은 데이터: ${data}`)
}
</script>

 

2-2. 자식 컴포넌트

<template>
  <div>
    <h2>자식 컴포넌트</h2>
    <button @click="sendEvent">이벤트 발생시키기</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'

// 발생시킬 이벤트 정의
const emit = defineEmits(['custom-event'])

const sendEvent = () => {
  emit('custom-event', '안녕하세요. 자식 컴포넌트에서 왔어요!')
}
</script>

 

 

결과

 

자식 컴포넌트에서 버튼을 클릭하면 이벤트가 발생하고, 부모 컴포넌트가 해당 이벤트를 처리하여 알림을 띄웁니다.

 

defineEmits는 Vue3의 <script setup> 문법에서 자식 컴포넌트가 부모 컴포넌트에 이벤트를 전달할 때 사용하는 함수입니다. emit을 통해 자식 컴포넌트는 특정 이벤트를 발생시켜 부모 컴포넌트에서 해당 이벤트를 처리할 수 있습니다.

 

defineEmits를 통해 자식 컴포넌트는 특정 이벤트를 정의( 위의 코드에선 'custom-event' )하고, 이를 emit으로 부모에게 전달합니다. emit 함수의 두 번째 인자는 부모에게 전달할 데이터이며 객체, 배열, 문자열 등 어떤 형태든 가능합니다.

 

그럼 부모 컴포넌트에서는 @이벤트명( 위의 코드에선 'custom-event' ) = "함수"를 사용해 이벤트를 수신하고, 전달된 데이터를 처리합니다.

 

어느 코드이든 컴포넌트 간의 결합도를 낮추는 것은 매우 중요하다고 생각하며, Props와 Emits는 Vue의 핵심적인 데이터 흐름 관리 도구로써, 단방향 데이터 흐름과 이벤트 기반 통신을 통해 컴포넌트 간 결합도를 최소화 할 수 있도록 해주는 주요 기능입니다. Props로 부모에서 자식으로 데이터를 전달하고, Emits로 자식에서 부모로 이벤트를 전달함으로써 컴포넌트 간의 데이터를 효율적으로 교환할 수 있으니, 유용하게 사용하시길 바랍니다.