Q1: Vue.js에서 컴포넌트 간 통신이란 무엇인가요?
A1: Vue.js에서 컴포넌트 간 통신이란, 서로 다른 컴포넌트 사이에서 데이터나 이벤트를 주고받아 상호작용하는 것을 말합니다. 여러 컴포넌트가 협력하여 애플리케이션을 구성할 때 필수적인 개념입니다.
---
Q2: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법은 무엇인가요?
A2: 부모 컴포넌트는 자식 컴포넌트에 `props`를 통해 데이터를 전달합니다. 예를 들어 `
`와 같이 바인딩하면 자식 컴포넌트는 `props: ['message']`로 받을 수 있습니다.
---
Q3: 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 방법은?
A3: 자식 컴포넌트는 `$emit` 메서드를 사용해 이벤트를 발생시키고, 부모 컴포넌트는 자식 컴포넌트에 이벤트 핸들러를 등록하여 이를 수신합니다.
예:
자식: `this.$emit('custom-event', payload)`
부모: `
`
---
Q4: 형제 컴포넌트 간 통신은 어떻게 하나요?
A4: 형제 컴포넌트는 직접 통신하지 않고, 보통 부모 컴포넌트를 통해 간접적으로 통신합니다.
방법:
1. 한 형제가 부모에 이벤트를 `$emit` 한다.
2. 부모는 데이터를 업데이트하고 이를 다시 다른 형제에게 `props`로 전달한다.
---
Q5: 깊은 컴포넌트 트리에서 데이터를 전달할 때 효율적인 방법은?
A5: 여러 레벨을 거쳐 props와 이벤트를 전달하는 것은 복잡하므로, 다음 방법을 사용합니다:
- Provide/Inject API : 상위 컴포넌트가 `provide`로 데이터를 제공하면, 하위의 여러 단계 떨어진 컴포넌트들이 `inject`로 데이터를 받을 수 있습니다.
- 전역 상태 관리(Vuex, Pinia) : 상태를 중앙화하여 필요한 컴포넌트들이 공유
---
Q6: Vuex 또는 Pinia는 무엇이며 언제 쓰나요?
A6: Vuex나 Pinia는 Vue.js 공식 상태 관리 라이브러리입니다. 애플리케이션의 상태를 중앙 집중식으로 관리하며, 특히 크고 복잡한 앱에서 컴포넌트 간 데이터 공유 및 상태 동기화에 효과적입니다.
---
Q7: 이벤트 버스(Event Bus)를 이용한 통신 방식은 무엇인가요?
A7: 이벤트 버스는 Vue 인스턴스를 중앙 이벤트 허브로 두고 이벤트를 발생(`$emit`)하거나 수신(`$on`)하는 방법입니다.
단점으로 관리가 복잡해지고, Vue3에서는 공식 권장되지 않습니다.
---
Q8: Composition API에서는 컴포넌트 간 통신을 어떻게 하나요?
A8: Composition API 환경에서도 기본적으로 props와 emits를 사용합니다. 추가로 `provide`/`inject`를 통해 깊은 컴포넌트 간 통신 가능하며, 전역 상태 관리 라이브러리와 결합하여 사용할 수 있습니다.
---
Q9: 요약하면 Vue.js에서 컴포넌트 간 통신 방법은?
A9:
1. Props (부모 → 자식 데이터 전달)
2. $emit 이벤트 (자식 → 부모 통신)
3. 부모를 통한 형제 간 소통 (props + event)
4. Provide/Inject (깊은 컴포넌트 간 데이터 전달)
5. 상태 관리 라이브러리 (Vuex, Pinia로 전역 상태 공유)
6. 이벤트 버스 (권장하지 않음, 구버전 스타일)
---
필요에 따라 적절한 방법을 선택해 사용하면 Vue 컴포넌트 간 유연한 통신이 가능합니다.
Vue.js에서 컴포넌트 간의 통신은 애플리케이션의 구조와 데이터 흐름을 관리하는 데 중요한 요소입니다. Vue.js는 다양한 방법으로 컴포넌트 간의 통신을 지원하며, 각 방법은 특정 상황에 맞게 사용될 수 있습니다. 아래에서는 Vue.js에서 컴포넌트 간의 통신 방법에 대해 자세히 설명하겠습니다. 1. Props와 Events Props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 `props`를 사용합니다. `props`는 자식 컴포넌트가 부모로부터 받은 데이터를 읽기 전용으로 사용할 수 있게 해줍니다. ```vue <!-- <a href='https://sangseek.com/sangseeks/ParentComponent/ko'>ParentComponent</a>.vue --> <template> <ChildComponent :message="parentMessage" /> </template> <script> export default { data() { return { parentMessage: 'Hello from Parent!' }; } }; </script> ``` ```vue <!-- ChildComponent.vue --> <template> <div>이중 중괄호 열기 message 이중 중괄호 닫기</div> </template> <script> export default { props: ['message'] }; </script> ``` Events 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달할 때는 `$emit` 메서드를 사용합니다. 자식 컴포넌트에서 특정 이벤트가 발생했을 때 부모 컴포넌트에 알릴 수 있습니다. ```vue <!-- ChildComponent.vue --> <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$emit('messageSent', 'Hello from Child!'); } } }; </script> ``` ```vue <!-- ParentComponent.vue --> <template> <ChildComponent @messageSent="handleMessage" /> </template> <script> export default { methods: { handleMessage(message) { console.log(message); } } }; </script> ``` 2. Vuex (상태 관리 패턴) Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 공식 라이브러리입니다. 여러 컴포넌트 간에 상태를 공유하고 관리할 수 있는 중앙 집중식 저장소를 제공합니다. Vuex를 사용하면 컴포넌트 간의 통신이 더 간단하고 일관되게 이루어질 수 있습니다. ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: 'Hello from Vuex!' }, mutations: { updateMessage(state, newMessage) { state.message = newMessage; } }, actions: { setMessage({ commit }, newMessage) { commit('updateMessage', newMessage); } } }); ``` ```vue <!-- ComponentA.vue --> <template> <div>이중 중괄호 열기 message 이중 중괄호 닫기</div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['message']) } }; </script> ``` ```vue <!-- ComponentB.vue --> <template> <button @click="changeMessage">Change Message</button> </template> <script> import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['setMessage']), changeMessage() { this.setMessage('New message from ComponentB!'); } } }; </script> ``` 3. Provide / Inject `provide`와 `inject`는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법입니다. 이 방법은 깊은 컴포넌트 트리에서 데이터를 전달할 때 유용합니다. ```vue <!-- ParentComponent.vue --> <template> <ChildComponent /> </template> <script> export default { provide() { return { message: 'Hello from Parent!' }; } }; </script> ``` ```vue <!-- ChildComponent.vue --> <template> <GrandChildComponent /> </template> <script> import GrandChildComponent from './GrandChildComponent.vue'; export default { components: { GrandChildComponent } }; </script> ``` ```vue <!-- GrandChildComponent.vue --> <template> <div>이중 중괄호 열기 message 이중 중괄호 닫기</div> </template> <script> export default { inject: ['message'] }; </script> ``` 4. Event Bus 이벤트 버스는 Vue 인스턴스를 사용하여 컴포넌트 간에 이벤트를 전달하는 방법입니다. 그러나 Vue 3에서는 Composition API와 Vuex를 사용하는 것이 더 권장됩니다. ```javascript // eventBus.js import Vue from 'vue'; export const EventBus = new Vue(); ``` ```vue <!-- ComponentA.vue --> <template> <button @click="sendMessage">Send Message</button> </template> <script> import { EventBus } from './eventBus'; export default { methods: { sendMessage() { EventBus.$emit('messageSent', 'Hello from ComponentA!'); } } }; </script> ``` ```vue <!-- ComponentB.vue --> <template> <div>이중 중괄호 열기 message 이중 중괄호 닫기</div> </template> <script> import { EventBus } from './eventBus'; export default { data() { return { message: '' }; }, created() { EventBus.$on('messageSent', (msg) => { this.message = msg; }); }, beforeDest<a href='https://sangseek.com/sangseeks/roy/ko'>roy</a>() { EventBus.$off('messageSent'); } }; </script> ``` 결론 Vue.js에서 컴포넌트 간의 통신은 다양한 방법으로 이루어질 수 있으며, 각 방법은 특정 상황에 맞게 선택할 수 있습니다. `props`와 `events`는 기본적인 통신 방법이며, Vuex는 상태 관리가 필요한 경우에 유용합니다. `provide/inject`는 깊은 컴포넌트 트리에서 데이터를 전달할 때 유용하며, 이벤트 버스는 간단한 이벤트 전달에 사용할 수 있습니다. 애플리케이션의 구조와 요구 사항에 따라 적절한 방법을 선택하여 컴포넌트 간의 통신을 구현하는 것이 중요합니다.
