Vue의 Props와 Emit: 무엇이고 어떻게 사용할까?

Vue.js는 컴포넌트 기반 프레임워크로, 컴포넌트 간의 데이터를 주고받기 위해 props와 emit을 사용합니다. 이 글에서는 props와 emit이 무엇인지, 그리고 이를 사용하는 방법을 Parent-Child 컴포넌트 예제를 통해 알아보겠습니다.

Props란?

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 속성입니다. 부모 컴포넌트에서 데이터를 정의하고, 자식 컴포넌트에서 이를 받아서 사용할 수 있습니다.

Emit이란?

emit은 자식 컴포넌트가 부모 컴포넌트로 이벤트를 전달할 때 사용됩니다. 자식 컴포넌트에서 특정 작업이 완료되거나 이벤트가 발생했을 때 이를 부모 컴포넌트로 알릴 수 있습니다.

예제 구성

우리는 Parent.vue와 Child.vue 두 개의 파일로 구성된 간단한 예제를 만들 것입니다.

1. Props를 사용하는 경우

부모가 데이터를 자식으로 전달합니다.

Parent.vue

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

// 부모 컴포넌트의 데이터
const parentMessage = ref('Hello from Parent!');
</script>

<template>
    <div>
        <h1>Parent Component</h1>
        <p>Message to Child: {{ parentMessage }}</p>

        <!-- 자식 컴포넌트 사용 -->
        <Child :message="parentMessage"></Child>
    </div>
</template>

Child.vue

Script

<script setup>
import { defineProps } from 'vue';

// 부모로부터 전달받을 props 정의
const props = defineProps({
message: String,
});
</script>

<template>
    <div>
        <h2>Child Component</h2>
        <p>Received from Parent: {{ message }}</p>
    </div>
</template>

2. Emit을 사용하는 경우

자식이 이벤트를 부모로 전달합니다.

Parent.vue

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

// 부모 컴포넌트의 데이터
const childResponse = ref('');

// 자식 컴포넌트의 이벤트 처리 함수
const handleChildResponse = (message) => {
	childResponse.value = message;
};
</script>

<template>
    <div>
        <h1>Parent Component</h1>

        <!-- 자식 컴포넌트 사용 -->
        <Child @response="handleChildResponse"></Child>

        <p>Response from Child: {{ childResponse }}</p>
    </div>
</template>

Child.vue

Script

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

// 부모로 이벤트를 전달할 emit 정의
const emit = defineEmits(['response']);

// 자식 컴포넌트의 데이터
const childData = reactive({
	inputMessage: '',
});

// 버튼 클릭 시 호출되는 함수
const sendResponse = () => {
	emit('response', `Child says: ${childData.inputMessage}`);
};
</script>

<template>
    <div>
        <h2>Child Component</h2>

        <input
        v-model="childData.inputMessage"
        placeholder="Type a response"
        />
	    <button @click="sendResponse">Send Response</button>
    </div>
</template>

동작 설명

Props 사용

1. 부모 컴포넌트에서 데이터를 정의합니다.
2. 자식 컴포넌트는 props를 통해 데이터를 받습니다.

Emit 사용

1. 자식 컴포넌트에서 이벤트가 발생합니다.
2. emit을 사용해 부모 컴포넌트로 메시지를 전달합니다.
3. 부모 컴포넌트는 전달받은 메시지를 처리합니다.

이처럼 props와 emit은 Vue.js 컴포넌트 간 데이터와 이벤트를 주고받는 데 매우 유용합니다. 이를 통해 컴포넌트 간의 역할을 명확히 나누고, 유지보수가 용이한 구조를 설계할 수 있습니다.