Vue3 부모 컴포넌트와 자식 컴포넌트 데이터 주고 받기

안녕하세요.
오늘은 지난 포스팅에 이어서 컴포넌트 간의 데이터 주고받는 방법을 포스팅하려고 합니다.
지난번에는 부모 컴포넌트에서 자식 컴포넌트를 import 시켜 하나의 컴포넌트로 만드는 것을 정리하였고, 오늘은 이어서 부모, 자식 컴포넌트 간의 데이터를 주고받는 방법을 정리해 보려고 합니다. 연동만 시켰다고 실제 업무에 활용하기에는 서로 간의 데이터 연동이 없기 때문에 데이터까지 주고받는 방법을 정리해 두면 실제 업무에 많은 도움이 됩니다.

그럼 오늘도 예제 소스 코드와 함께 하나씩 정리해 보도록 하겠습니다!

---

1. emit & props 이해하기

컴포넌트 간의 데이터 전달

소스 코드를 들어가기 전에 간단하게 소스 코드에 대한 프로세스를 그림으로 먼저 그렸습니다.
부모에서 자식으로 전달할 때에는 'props'를, 자식에서 부모로 전달할 때에는 'emit'을 사용합니다.

- 부모 컴포넌트 props (parentText: '안녕하세요.') ---> props (parentText) 자식 컴포넌트
- 부모 컴포넌트 props (@child) <--- emit (child: '반갑습니다.') 자식 컴포넌트

약간의 텀을 주기 위해 자식 컴포넌트에서는 3초 지연시킨 후 부모 컴포넌트로 값을 전달하도록 하였습니다.
위의 그림이 이해되셨다면 이제 소스 코드로 넘어가겠습니다.

---

2. 부모 컴포넌트 ( ParencComponent.vue )

<script>
import ChildComponent from './ChildComponent.vue'
import { reactive, toRefs } from 'vue'

export default {
    components: {
      ChildComponent,
    },
    setup() {
        const data = reactive({
            parentText  : '안녕하세요.',
            childText   : '',
        })

        function onChild(text) {
            data.childText = text
            console.log(data.childText)
        }

        return {
            ...toRefs(data),
            onChild,
        }
    }
}
</script>
<template>
    <div>
        <span>Parent Component</span>
        <div>자식에서 전달받은 값: {{ childText }}</div>
        <br>
        <div>
            <!-- child 1번 컴포넌트 -->
            <ChildComponent
                :parentText="parentText"
                @child="onChild"
                />
                <!-- ㄴ :parentText : 자식 컴포넌트에 데이터 전달 -->
                <!-- ㄴ @child      : 자식 컴포넌트에서 전달받은 데이터 -->
        </div>
    </div>
</template>

먼저 부모 컴포넌트를 보겠습니다. 부모 컴포넌트에서는 자식 컴포넌트에게 parentText 값을 전달해 주려고 합니다. setup 내에서 값을 세팅해주고 해당 값은 import 시켜준 자식 컴포넌트 태그 영역에서 전달을 해 줄 수 있습니다.

 <ChildComponent
                :parentText="parentText"
                @child="onChild">

위의 부분이 자식 컴포넌트와 연동이 되는 태그 영역입니다.
:parentText - 자식 컴포넌트로 연동하여 값을 전달하는 부분
@child - 자식 컴포넌트로부터 연동하여 값을 전달받는 부분

위의 내용처럼 값을 전달할 속성과 전달받을 속성을 설정해 주면 됩니다.

---

3. 자식 컴포넌트 ( ChildComponent.vue )

<script>
import { reactive } from 'vue'

export default {
    props: {
        // 부모에서 전달받은 데이터
        parentText: { type: String, default: '' }
    },
    setup(props, context) {
        const data = reactive({
            text: props.parentText
        })

        setTimeout(() => {
            context.emit('child', '반갑습니다.')
        }, 3000)

        return { 
            ...data,
        }
    }
}
</script>
<template>
    <div>
        <div>Child 01</div>
        <div>부모에서 전달받은 값: {{ text }}</div>
    </div>
</template>

자식 컴포넌트에서는 부모에게 전달받은 값 parentText를 props를 이용하여 받아주고 html에 출력해주도록 하였습니다.
그 후 setTimeout을 이용하여 3초 지연 후 부모 컴포넌트로  값을 전달하도록 하였습니다.
예제 소스에서는 Vue3의 setup()을 이용하여 작성을 하였기 때문에 setup()에서 두번째 인자값 context에서 emit을 사용하면 됩니다.
부모 컴포넌트에서는 자식 컴퍼넌트에서 값을 받기 위해 @child를 선언하였고, 자식 컴포넌트에서는 @child로 값이 전달될 수 있도록 emit을 이용하여 'child'에 값을 전달하고 있습니다.

context.emit('child', '반갑습니다.')

이렇게만 하면 자식 컴포넌트에서 부모 컴포넌트로 값을 전달하는 것은 간단하게 처리가 됩니다:

---

실행 결과

부모에서 자식으로 전달한 값과 자식에서 부모에게 전달한 값이 정상적으로 잘 연동된 결과 화면입니다.

반응형

---

마무리

오늘은 이렇게 Vue의 컴포넌트간 데이터 연동하는 방법을 알아봤습니다. 오늘 정리한 내용에서 가장 중요한 부분은
부모에서 자식으로 값을 전달할 때는 props를, 자식에서 부모에게 값을 전달할 때에는 emit을 사용
이 부분만 확실하게 이해하셨다면 컴포넌트를 다루는데 큰 무리 없이 활용할 수 있을 겁니다. :)


오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

---